【JavaScript】AniJSが楽で軽快で素晴らしかったので紹介

Pocket
LINEで送る

jQueryに依存しないPureJavaScriptで動作する、animationを付与するプラグイン「AniJS」が軽快でかなりいい感じだったのでご紹介します。

AniJSとは

  • JavaScriptのプラグイン
  • CSS3で要素にAnimationをつける
  • Animationの種類は役80種類
  • プロパティ付与だけで発火可能!
  • AniJSの導入方法

    ダウンロード

    公式サイトからソースをダウンロードして、お使いのサーバーにアップロード。

    <script src="anijs-min.js"></script>
    <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
    

    cssに関しては、公式にこのURLから参照するように書いてあるのでこれで問題ないかと。

    もし不安な場合は、こちらからダウンロードしてお使いください。

    ちなみに、そもそもダウンロードが面倒な場合は下記。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs-min.js"></script>
    <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
    

    利用方法

    aniJSの利用方法はとても簡単で、あとはHTMLで下記のように記述するだけです。

    <div data-anijs="if: click, do: flip animated, to: .me" class="box me">me</div>
    

    if=イベント発火のタイミング,do=発火させるAnimationの名前,to=対象となる要素

    click発火

    See the Pen 【AniJS】JavaScriptで簡単にanimationできるプラグイン by nkmrkisk (@rekid) on CodePen.

    mouseover発火

    See the Pen 【AniJS】JavaScriptで簡単にanimationできるプラグイン2 by nkmrkisk (@rekid) on CodePen.

    利用可能なAnimation

    デフォルトの設定(上記で外部参照しているcss)ですべてのAnimationが動くのかは確認していないのですが、おそらくAniCollectionで紹介されているすべてのanimationが実装可能です。
    何より数が80件弱と多いのが嬉しくて、個人的にお気に入りな理由です。(特に「flip」の挙動が良い!)

    AniCollection

    備忘

    公式のDocumentを簡単に見た印象だと、scrollなどでも発火するはずなのですがうまく発火しませんでした。
    僕の記述というか、認識不足だと思うので後々の課題にしよう。。
    何かわかる方がいたら教えていただけると嬉しいです><!

    SNSでもご購読できます。