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. Chameleon.js
  2. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

    ReboxというjQueryプラグインを使えば、レスポンシブに対応した…

  3. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  4. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  5. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP