iconate.js

JavaScript

アイコンをオシャレにアニメーションしながらtransformさせる「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

関連記事

  1. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  2. Clock Timepicker Plugin for jQuery
  3. Docked Link jQuery Plugin
  4. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  5. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  6. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP