初めてのアニメーション！オススメライブラリ集

今回の開発で使用したライブラリは、以下の２種類。
① Animate.css
② Inview.js

この記事では上記の２種類の使い方と、
今回の開発で利用を検討したその他のライブラリの説明をします。

##アジェンダ

1. Animate.css
2. Wow.js
3. Inview.js
4. DynCSS
5. AnimeJS
6. (補足)CDNとは？
7. まとめ

##1. Animate.css
文字通りWebサイトにアニメーションをつけることができるcssファイル。
Animate.cssはWebサイトが読み込まれた瞬間に発動してしまうので、一般的にwow.jsと組み合わせて使う。

■ 公式サイト
https://daneden.github.io/animate.css/
→プルダウンで見たい動きを選択し、”Animate it”を押せば確認可能。

■ CDN
https://cdnjs.com/libraries/animate.css

■ HTMLの書き方_例
・head部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >

・body部分

<img class="animated rollIn" src="photo/XXX.jpg" alt="XXX">

##2. Wow.js
Webサイトのスクロール位置を知ることができる。
wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶことができる。
スクロールが行われてからアニメーションさせるため必要。
→JQueryと競合して反応しなくなる。。。そのため代替でInviewを使用。

■ 公式サイト
https://wowjs.uk

■ CDN
https://cdnjs.com/libraries/wow

■ HTMLの書き方_例
・head部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
        <script>
          new WOW().init();
        </script>

・body部分

<img class="animated zoomOutLeft wow" data-wow-duration="2.0s" data-wow-delay=”-1s” src="photo/IMG_0383.jpg" alt="KJ">

■ オプション

• data-wow-duration→アニメーションの長さを変更する
• data-wow-delay→アニメーション開始前の遅延
• data-wow-offset→アニメーションを開始する距離（ブラウザの下部から）
• data-wow-iteration→アニメーションが繰り返される回数

##3. Inview.js
画面スクロール中に特定の要素が画面内に入ったことイベントとして取得する事ができる。
そのイベントのタイミングを使って、cssアニメーションを実行させることが可能。
上記の「animate.css」と一緒に使うことも可能。

■ 公式(GitHub)
https://github.com/protonet/jquery.inview

■ HTMLの書き方
・head部分

  <script type="text/javascript" src="./js/jquery.inview.min.js"></script>

■ Javascriptの書き方

  //コンテンツのアニメーション
  let target = $('.inviewAction');
  target.css('opacity', '0');
  target.on('inview', function(event, isInView) {
    //表示領域に入った時にスライドイン
    if (isInView) {
      $(this).animate({
        opacity: 1
      }, 1000).addClass('slideInLeft');
    }
  });

##4. DynCSS

比較的新しいライブラリで日本語での使い方・まとめページがなく使い方が分からず断念。。。

・公式サイト
https://www.vittoriozaccaria.net/dyn-css/#what-is-it

##5. AnimeJS
まだ比較的新しいライブラリだが多機能かつ高性能で人気。
HTMLゲームのアニメーションには欠かせない。ただしシンプルなWebアプリ向きではない。
特筆すべきはAnime.JSのドキュメント。HTMLやJavaScriptコード、実行可能なサンプルをアプリで閲覧可能。
一度試したが、なぜかjsファイルが読み込めずに利用するのを挫折。。。ただ一度使ってみる価値あり。

■ 公式サイト
https://animejs.com
→上記のリンクを押下後、右上にある”Documentation”リンクからドキュメントを閲覧可能。

##6. (補足)CDNとは？
■ CDNとは
コンテンツデリバリネットワーク(英: content delivery network、CDN)
→ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのこと。

もう少し具体的に説明すると、ウェブサイトを表示する時に一般的に使われているjQueryのjavascriptやcssファイルを世界中にある高速なサーバーに設置して、そのファイルを皆で共用しようと言うもの。
例えば、サーバーがアメリカにありファイルもアメリカにある場合、日本から閲覧すると速度は遅くなりますが、CDNなら閲覧者から一番近いサーバーからファイルを読み込むので表示速度は速くなるという仕組み。

メリットは以下2つ
①ウェブサイトの表示速度が速くなる
②自サーバーへの負担や転送量を軽減

CDNを利用しない場合、ウェブサイトを表示するには自分のサーバー内にあるjsやcssファイルを読み込むのですが、
アクセスが多い場合、共有サーバーなどではレスポンスが悪くなったり表示速度が低下したり、
最悪の場合は503エラーになってサイトが閲覧できなくなってしまいます。
でも、CDNで用意されているファイルを外部サイトから読み込めば、自分のサーバーへの負担がなくなり、高速表示につながると言う訳です。

##7. まとめ
この開発をやる前は、アニメーション難易度が高そう。。と思っていましたが、ライブラリを使うと予想以上に簡単に出来ました!!!!
Animate.cssとInview.jsの組み合わせは、気軽にアニメーションを加えることができオススメです!!
私のような初心者がアニメーションを１から作るとなると時間がかかるため、初めはライブラリを使い慣れていくのがいいと思います。慣れてくれば自分でアニメーションを実装してみると良いかと＾＾