CSSアニメーションもこれなら手軽!DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron

ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。

実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。

サイトのキャプチャ

Micron.js
Micron.js -GitHub

Micron.jsの特徴

Micron.jsの特徴
インタラクションを与える
要素に「data-micron」を加えるだけで、インタラクションを与えることができます。
バインド インタラクション
「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。
コントロール インタラクション
エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。

Micron.jsのデモ

ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。
ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。

shake
fade
jelly
bounce

tada
groove
swing
squeeze

flicker
jerk
blink
pop

Micron.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

ファイルは、CDNでも用意されています。

Step 2: アニメーションの付与

まずは、基本書式。
アニメーションを適用する要素に、data-micronを加えます。「インタラクションの名前」には、「bounce」「shake」などを記述します。

バウンスのインタラクションを加えるには、下記のように記述します。

オプションではアニメーションの持続時間やイージングを設定できます。

指定した要素をトリガーにして、別の要素をアニメーションさせることもできます。

sponsors

top of page

©2024 coliss