もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.
Tips
アニメーションに対応したSVGアイコン「Titanic」
アニメーション付きのSVGアイコンを一から設計し、さらにそれを制御するJavaScriptまで自作しようとすると、想像以上に工数がかかります。細かなモーション設計やパフォーマンス調整まで含めれば、なおさらです。
そこで本記事では、Webページやスマートフォンアプリで頻繁に使用される各種アイコンを網羅し、アニメーションに対応したSVGと埋め込み用コードをセットで提供するJavaScriptライブラリを紹介します。
導入はきわめてシンプルです。複雑なSVG編集や高度なJavaScriptの知識は必要ありません。フロントエンド実装に不慣れな方でも、短時間でアニメーションアイコンを組み込むことができます。
アイコンはdiv要素一つで、簡単に実装できます。
デフォルトで、それぞれホバーするとアニメーションし、クリックやタップに変更することも可能です。
1.「Titanic」のスクリプトを外部ファイルとして記述します。
<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>2. </body>の直前にスクリプトを記述して、初期化します。
<body>
...
コンテンツ
...
<script>
var titanic = new Titanic();
</script>
</body>3. アイコンはdiv要素などにclassを付与して表示させます。
<div class='titanic titanic_chat'></div>4. カスタマイズ
SVGなので、サイズやカラーはCSSで変更できます。
.titanic {
width: 160px;
height: 160px;
}
.titanic path {
fill: #f07936;
stroke: #f07936;
}
コメントを残す