iconate.jsはアイコンをアニメーションさせながら別のアイコンへtransformすることができるJSライブラリです。使いどころは少し難しいかもしれませんが、ちょっとした可愛いアクセントにはピッタリですね。アニメーションの種類もそれなりに揃っている印象です。
iconate.js
実際の動作は以下のページで確認することができます。
デモではFont Awesomeのアイコンが使用されています。
transformさせる前のアイコンと後のアイコン、そしてアニメーションの種類を選択した後に真下にあるアイコンをクリックするとそれに対応した動作が実行されます。
アニメーションの種類は以下の通りです。
- rollOutRight
- rollOutLeft
- rubberBand
- zoomOut
- zoomIn
- fadeOut
- fadeOutRight
- fadeOutLeft
- fadeOutTop
- fadeOutBottom
- horizontalFlip
- verticalFlip
- bounceOutBottom
- bounceOutTop
- bounceOutLeft
- bounceOutRight
- rotateClockwise
- rotateAntiClockwise
- tada
オプション項目のfromにアニメーション前のアイコンを、toにはアニメーション後のアイコン、そしてanimationには上記のアニメーション種類の中から好きなものを指定してあげます。
Webサイトにちょっとした遊び心を取り入れたい時なんかに活用してみたいですね。
気になる方は是非チェックしてみてください。
