アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

iconate.js

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サイトにちょっとした遊び心を取り入れたい時なんかに活用してみたいですね。

iconate.js

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives