CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
Post on:2018年1月24日
sponsorsr
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。
実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。
Micron.jsの特徴
- インタラクションを与える
- 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。
- バインド インタラクション
- 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。
- コントロール インタラクション
- エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。
Micron.jsのデモ
ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。
ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
Micron.jsの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 |
<head> ... <link href="micron.min.css" type="text/css" rel="stylesheet"> <script src="micron.min.js" type="text/javascript"></script> </head> |
ファイルは、CDNでも用意されています。
|
1 2 3 4 5 |
<head> ... <link href="https://unpkg.com/webkul-micron@1.0.2/dist/css/micron.min.css" type="text/css" rel="stylesheet"> <script src="https://unpkg.com/webkul-micron@1.0.2/dist/script/micron.min.js" type="text/javascript"></script> </head> |
Step 2: アニメーションの付与
まずは、基本書式。
アニメーションを適用する要素に、data-micronを加えます。「インタラクションの名前」には、「bounce」「shake」などを記述します。
|
1 |
data-micron="インタラクションの名前" |
バウンスのインタラクションを加えるには、下記のように記述します。
|
1 |
<a href="#" class="button" data-micron="bounce">ラベル</a> |
オプションではアニメーションの持続時間やイージングを設定できます。
|
1 2 3 4 5 |
<!-- 持続時間 --> <a href="#" class="button" data-micron="bounce" data-micron-duration=".95">ラベル</a> <!-- イージング --> <a href="#" class="button" data-micron="bounce" data-micron-timing="ease-in">ラベル</a> |
指定した要素をトリガーにして、別の要素をアニメーションさせることもできます。
|
1 2 3 4 5 |
<!-- トリガー --> <a href="#" class="button" data-micron="bounce" data-micron-bind="true" data-micron-id="me">ラベル</a> <!-- アニメーションさせる要素 --> <a href="#" class="button" id="me">Binded</a> |
sponsors
