実装が非常に簡単!アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic

アニメーションするSVGアイコンもそれを実装するJavaScriptも、ゼロから作成すると時間がかかります。
Webページやスマホアプリでよく使用するさまざまなアイテムが用意された、アニメーションに対応したSVGアイコンと埋め込みコードがセットになったJavaScriptのライブラリを紹介します。

実装は非常に簡単で、SVGやJavaScriptが苦手な人でも問題無しです。

アイコンのキャプチャ

Titanic
Titanic -GitHub

SVGアイコンのデモ

アイコンはdiv要素一つで、簡単に実装できます。
デフォルトで、それぞれホバーするとアニメーションし、クリックやタップに変更することも可能です。

SVGアイコンの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

ファイルは自分のサーバーにアップロードして利用しても大丈夫です。

Step 2: JavaScript

</body>の上に下記を記述して、スクリプトを初期化します。

自分のサーバーにアップロードした場合は、iconsフォルダをダウンロードして指定します。

Step 3: HTML

アイコンはdiv要素などにclassを付与するだけで、利用できます。

カスタマイズ

アイコンはSVGなので、サイズやカラーはCSSで変更できます。

top of page

©2018 coliss