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

オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。

実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。

サイトのキャプチャ

iconate.js -GitHub

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);

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

  • rollOutRight
  • rollOutLeft
  • rubberBand
  • zoomOut
  • zoomIn
  • fadeOut
  • fadeOutRight
  • fadeOutLeft
  • fadeOutTop
  • fadeOutBottom
  • horizontalFlip
  • verticalFlip
  • bounceOutBottom
  • bounceOutTop
  • bounceOutLeft
  • bounceOutRight
  • rotateClockwise
  • rotateAntiClockwise
  • tada

top of page

©2017 coliss