クリックするとアイコンが変化するiconate.jsを使ってみた - ハイパーニートプログラマーへの道

デモページを見てみると一発でわかるのですが、

iconate.js

アイコンをクリックすると別のアイコンに変化します。

使い方

https://github.com/bitshadow/iconate#basic-usage

公式ページより

インストール

以下の３つの方法があります。

NPM: npm install iconate
Bower: bower install iconate
Download zip.

Note: iconate.js also supports AMD and commonJS module pattern.

今回はCodepenでやってみましたのでRawGitを使用しました（あんまりよくないかもしれんけど）

スタイルシートとjsファイルの設定

<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">

アイコンの要素を作る

fontawsomeを使用しているようなのでその導入も忘れず。

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

アニメーションの設定

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

iconate(iconElement, options);

optionsのfrom:に始めのアイコン（ここではハンバーガーアイコン）、to:に右矢印を設定。
animation:はrubberBand（ゴムみたいにみょ〜んと動く）
そしてiconate関数の第一引数に対象となる要素、第二引数にオプションを渡します（第三引数にコールバック関数を設定することも可能）

というわけでCodepenでこんなのを作ってみました。

See the Pen Examples with iconate.js by Noriyo Akita (@noriyotcp) on CodePen.

埋め込むときに気づいたけど、結構縦長だなあw
アイコンのサイズはfa-3xなのでデカイです。アニメーションはrubberBandにしています。
アニメーションも好きなのを選択できるように・・・と思ったけど、それだったらデモページの方で試した方がいいんじゃないかとw
＊iPhoneのSafariから試してみたけどタップでもできる！