読者です 読者をやめる 読者になる 読者になる

ハイパーニートプログラマーへの道

頑張ったり頑張らなかったり

クリックするとアイコンが変化するiconate.jsを使ってみた

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

iconate.js

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

使い方

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

公式ページより

インストール

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


  • 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
iPhoneSafariから試してみたけどタップでもできる!