iconate.js-アイコンをぽよんとしたアニメーションで切り替える

Font Awesomeのアイコンを、クリックすることで別のアイコンにアニメーションで切り替える「iconate.js」

iconate-js

公式サイト

アクセスするとどことなく「Animate.css」っぽいデザインのサイトがでてきます。
ドロップダウンメニューから、「変更前のアイコン」「変更後のアイコン」「変更する際のアニメーション」を選んで、すぐ下のアイコンをクリックするとプレイビューできます。
とってもかわいい動き・・・しかし一体何に使うんだろう?

使い所

サイトのデモではアイコンが数種類しか選べないのですが、実際はFont Awesomeの数百種類のアイコンを使えるので色々と活用できます。

メニューボタン

例えば、メニューボタンのアイコンを設置して、

メニューボタンのアイコンをクリックした時に、iconate.jsが発動するようにしてあげると、メニューを表示した後に、閉じるボタンにすることができます。

ダウンロードボタン

ダウンロードボタンを設置して

ダウンロードボタンのアイコンをクリックした時に、ローディングのアイコンへ切り替え、ついでに「fa-spin」のクラスをつけ回転させることで、ダウンロード中にローディングを表示できるようになります。

というように、iconate.jsはそのまま使うのではなく、自分が作っているjsに組み込んで、任意のタイミングで呼び出す方がいいのかなぁと思いました。

サンプル

#menuOpenをクリックすると、#sidebarが表示され、アイコンが閉じるに変化する。

オススメのjsの本
  • このエントリーをはてなブックマークに追加
« »

デザインとカメラとロードバイクと畑

© 2017 cowcow blog