[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js

サイト構築 -JavaScript

Post on:2015年5月26日

iconate.jsのデモ

デモは、Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。

デモページ

セレクトメニューは左から、元のアイコン、変化した時のアイコン、アニメーション、になっており、変更するとリアルタイムに楽しめます。

いつものようにデモをアニメーションGIFにしてみました。
よく見かけるハンバーガーアイコンを×アイコンに変形させます。

「zoomOut」「rubberBank」のアニメーション例

iconate.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="iconate.min.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script type="text/javascript" src="iconate.min.js">
</body>

Step 2: HTML

アイコンを配置します。
デモではFont Awesomeのアイコンを使用していますが、BootstrapのGlyphiconsやオリジナルのものでも利用できます。

<i id="icon" class="fa fa-bars fa-lg"></i>

Step 3: JavaScript

「from」に元のアイコン、「to」に変化した時のアイコン、「animation」にアニメーションを指定して、スクリプトを実行します。

    var iconElement = document.getElementById('icon');
    var options = {
        from: 'fa-bars',
        to: 'fa-arrow-right',
        animation: 'rubberBand'
    };

    iconate(iconElement, options);

変化する時のアニメーションは、さまざまなものが用意されています。