[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
Post on:2015年5月26日
sponsorsr
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。
実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。
iconate.jsのデモ
デモは、Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。
セレクトメニューは左から、元のアイコン、変化した時のアイコン、アニメーション、になっており、変更するとリアルタイムに楽しめます。
いつものようにデモをアニメーションGIFにしてみました。
よく見かけるハンバーガーアイコンを×アイコンに変形させます。
「zoomOut」「rubberBank」のアニメーション例
iconate.jsの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
[html]
...
...
コンテンツ
...
