実装が非常に簡単！アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic
Post on:2017年7月5日
sponsorsr
アニメーションするSVGアイコンもそれを実装するJavaScriptも、ゼロから作成すると時間がかかります。
Webページやスマホアプリでよく使用するさまざまなアイテムが用意された、アニメーションに対応したSVGアイコンと埋め込みコードがセットになったJavaScriptのライブラリを紹介します。
実装は非常に簡単で、SVGやJavaScriptが苦手な人でも問題無しです。
SVGアイコンのデモ
アイコンはdiv要素一つで、簡単に実装できます。
デフォルトで、それぞれホバーするとアニメーションし、クリックやタップに変更することも可能です。
SVGアイコンの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 |
<head> ... <script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script> </head> |
ファイルは自分のサーバーにアップロードして利用しても大丈夫です。
|
1 2 3 4 5 |
<head> ... <script src="titanic.min.js"></script> <script src="bodymovin.min.js"></script> </head> |
Step 2: JavaScript
</body>の上に下記を記述して、スクリプトを初期化します。
|
1 2 3 4 5 6 7 8 |
<body> ... コンテンツ ... <script> var titanic = new Titanic(); </script> </body> |
自分のサーバーにアップロードした場合は、iconsフォルダをダウンロードして指定します。
|
1 2 3 4 5 6 7 8 |
<body> ... コンテンツ ... <script> var titanic = new Titanic('https://自分のドメイン/icons/'); </script> </body> |
Step 3: HTML
アイコンはdiv要素などにclassを付与するだけで、利用できます。
|
1 |
<div class='titanic titanic_chat'></div> |
カスタマイズ
アイコンはSVGなので、サイズやカラーはCSSで変更できます。
|
1 2 3 4 5 6 7 8 9 |
.titanic { width: 100px; height: 100px; } .titanic path { fill: #249795; stroke: #249795; } |
sponsors
