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. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  2. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  3. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  4. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  5. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  6. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP