JS製クリックアニメーションライブラリ「micron.js」

HTMLの要素をクリックした時に 簡単にアニメーションを付けることが出来る javascriptライブラリ「micron.js」の紹介です。

- 指定した要素をクリックした時にアニメーションを付け加えることができます。

  micron.jsは npm や yarn、bowerなどのパッケージの他、CDNからライブラリ本体を読み込む事ができます。

# npm
npm install webkul-micron
# yarn
yarn add webkul-micron
# bower
bower install webkul-micron
# cdn
 ## css
https://unpkg.com/webkul-micron/dist/css/micron.min.css
 ## js
https://unpkg.com/webkul-micron/dist/script/micron.min.js

<!-- ブラウザ上で使う場合、micron.css, micron.js、２つのファイルを読み込みます -->
<link href="https://unpkg.com/webkul-micron/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron/dist/script/micron.min.js" type="text/javascript"></script>

  micro.js の注目すべき所は、javascriptコード無しにクリックアニメーションを実装することも可能で、執筆時点では12種類のアニメーションが用意されています。
( * version 1.1.1 )

 micron.jsの使い方はとても簡単で、アニメーションを行いたい要素に ' data-micron="アニメーション名" ' 属性を追加するだけで使うことが出来ます。

<!-- data-micron="pop" 属性を追加 -->
<button class="btn btn-primary" data-micron="pop"> click me </button>
<!-- data-micron-duration 属性をつけるとアニメーションの速度が調節できます -->
<button class="btn btn-primary" data-micron="tada" data-micron-duration=".95"> click me </button>

用意されているアニメーションの種類
 - shake
 - fade
 - jelly
 - bounce
 - tada
 - groove
 - swing
 - squeeze
 - flicker
 - jerk
 - blink
 - pop

他の要素に紐付ける場合 

ある要素をクリックした時に他の要素にアニメーションをさせる事も簡単で、その場合は元となる要素に ' data-micron-bind="true" '、' data-micron-id="id名" 'をつけるだけです。

下のスニペットは ボタンをクリックした時に、アイコンにアニメーションを加えています。

<a class="button is-success" data-micron="pop" data-micron-bind="true" data-micron-id="me"> Click ME </a>
<i class="fas fa-address-book fa-4x" id='me'> </i>

javascriptからアニメーションを実行する場合

 micron.jsは javascriptから処理を書いてもアニメーションを起動させることが出来ます。上記で紹介した属性をメソッドチェーンで繋げるだけなので、簡単に使えます。

<a class="button is-link" id="clickMe"><i class="fab fa-js-square" id="ijs"></i> Click ME</a>

<script>
// jqueryのクリックイベントと組み合わせています
$("#clickMe").click(function(){
 micron.getEle("#ijs") // 要素のidを取得
        .interaction("bounce") // アニメーション名
        .duration(".95")　// アニメーションのスピード
        .timing("linear"); // 起動させるタイミング 
});
/** timingは下記の4種類用意されています
- linear
- ease-in
- ease-out
- ease-in-out
**/
</script>

See the Pen micron.js demo by cupof (@cupof-github) on CodePen.

以上がmicron.jsの紹介でした。micron.jsはライブラリ本体がとても軽量克つ容易に実装できます。
( *.min.css : 2.65KB *.min.js : 1.38KB [ version 1.1.1 ] )

 ライブラリを読み込めば簡単に使うことが出来るので、ボタンをクリックした時のちょっとしたアニメーションが欲しい時に使うと便利そうです。

Github : webkul/micron