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

ScrollMenu.js縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」前のページ

コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」次のページstackgrid.adem.js

関連記事

  1. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  2. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

  3. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  4. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  5. Before and after slider
  6. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP