【JS】【CSS】wow.js と Animate.css でアニメーションを実装する

JavaScript

■ はじめに

 * 以下の関連記事で扱った Material Design for Bootstrap 4 (MDB) のサンプルで
   wow.js と Animate.css でアニメーションを実装していたので、
   かなり簡単にアニメーションを実装できたので、メモする
https://blogs.yahoo.co.jp/dk521123/37632575.html

■ アニメーションツール

 * 軽量
 * jQuery不要

wow.js

 * Webサイトのスクロール位置を知ることができるJavaScirptプラグイン
公式サイト
http://mynameismatthieu.com/WOW/

Animate.css

 * 簡単にアニメーションが実装できる
 * アニメーションも豊富
https://github.com/daneden/animate.css
 * MIT License(商用利用可能)
https://github.com/daneden/animate.css/blob/master/LICENSE
公式サイト
https://daneden.github.io/animate.css/

★注意★：wow.jsのライセンスについて

 * 商用利用の場合は、購入が必要（そんなに高くないけど）
https://www.uplabs.com/store/license

■ 使い方

以下の3 Stepのみ 
Step1 : 「wow.js と Animate.css」をそれぞれインポート
Step2 :  「new WOW().init();」で初期化
Step3 :  アニメーション箇所にCSS「wow 【アニメーション（ex fadeIn）】」を指定

■ サンプル

例１：Hello World

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello World!</title>
<meta charset="UTF-8">
<!-- Step1 :  「wow.js と Animate.css」をそれぞれインポート(今回はCDN） -->
<!-- animate.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >
<!-- wow.js -->
<script src="">https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">

<!-- Step2 :  「new WOW().init();」で初期化 -->
<script>
new WOW().init();
</script>
</head>
<body>
  <h1>Hello World!</h1>

  <!-- Step3 :  アニメーション箇所にCSS「wow 【アニメーション（ex fadeIn）】」を指定 -->
  <div class="wow fadeIn">fadeIn animation sample</div>

  <!-- 下記の補足も参照 -->
  <div class="wow bounceIn" data-wow-duration="2s" data-wow-delay="5s">bounceIn animation sample</div>
  <div class="wow slideInUp" data-wow-offset="10"  data-wow-iteration="10">slideInUp animation sample</div>
</body>
</html>

例２：全アニメーション

どのアニメーションを採用するか評価用として作ったが、実際に動かしたが、よくわからなかった 
<!DOCTYPE html>
<html lang="ja">
<head>
<title>All animation Sample</title>
<meta charset="UTF-8">
<!-- CDN -->
<!-- animate.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >
<!-- wow.js -->
<script src="">https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">
<script>
new WOW().init();
</script>
</head>
<body>
  <h1>All animation Sample</h1>

  <div class="wow bounce">bounce animation sample</div>
  <div class="wow flash">flash animation sample</div>
  <div class="wow pulse">pulse animation sample</div>
  <div class="wow rubberBand">rubberBand animation sample</div>
  <div class="wow shake">shake animation sample</div>
  <div class="wow headShake">headShake animation sample</div>
  <div class="wow swing">swing animation sample</div>
  <div class="wow tada">tada animation sample</div>
  <div class="wow wobble">wobble animation sample</div>
  <div class="wow jello">jello animation sample</div>
  <div class="wow bounceIn">bounceIn animation sample</div>
  <div class="wow bounceInDown">bounceInDown animation sample</div>
  <div class="wow bounceInLeft">bounceInLeft animation sample</div>
  <div class="wow bounceInRight">bounceInRight animation sample</div>
  <div class="wow bounceInUp">bounceInUp animation sample</div>
  <div class="wow bounceOut">bounceOut animation sample</div>
  <div class="wow bounceOutDown">bounceOutDown animation sample</div>
  <div class="wow bounceOutLeft">bounceOutLeft animation sample</div>
  <div class="wow bounceOutRight">bounceOutRight animation sample</div>
  <div class="wow bounceOutUp">bounceOutUp animation sample</div>
  <div class="wow fadeIn">fadeIn animation sample</div>
  <div class="wow fadeInDown">fadeInDown animation sample</div>
  <div class="wow fadeInDownBig">fadeInDownBig animation sample</div>
  <div class="wow fadeInLeft">fadeInLeft animation sample</div>
  <div class="wow fadeInLeftBig">fadeInLeftBig animation sample</div>
  <div class="wow fadeInRight">fadeInRight animation sample</div>
  <div class="wow fadeInRightBig">fadeInRightBig animation sample</div>
  <div class="wow fadeInUp">fadeInUpBig animation sample</div>
  <div class="wow fadeOut">fadeOut animation sample</div>
  <div class="wow fadeOutDown">fadeOutDown animation sample</div>
  <div class="wow fadeOutDownBig">fadeOutDownBig animation sample</div>
  <div class="wow fadeOutLeft">fadeOutLeft animation sample</div>
  <div class="wow fadeOutLeftBig">fadeOutLeftBig animation sample</div>
  <div class="wow fadeOutRight">fadeOutRight animation sample</div>
  <div class="wow fadeOutRightBig">fadeOutRightBig animation sample</div>
  <div class="wow fadeOutUp">fadeOutUp animation sample</div>
  <div class="wow fadeOutUpBig">fadeOutUpBig animation sample</div>
  <div class="wow flipInX">flipInX animation sample</div>
  <div class="wow flipInY">flipInY animation sample</div>
  <div class="wow flipOutX">flipOutX animation sample</div>
  <div class="wow flipOutY">flipOutY animation sample</div>
  <div class="wow lightSpeedIn">lightSpeedIn animation sample</div>
  <div class="wow lightSpeedOut">lightSpeedOut animation sample</div>
  <div class="wow rotateIn">rotateIn animation sample</div>
  <div class="wow rotateInDownLeft">rotateInDownLeft animation sample</div>
  <div class="wow rotateInDownRight">rotateInDownRight animation sample</div>
  <div class="wow rotateInUpLeft">rotateInUpLeft animation sample</div>
  <div class="wow rotateInUpRight">rotateInUpRight animation sample</div>
  <div class="wow rotateOut">rotateOut animation sample</div>
  <div class="wow rotateOutDownLeft">rotateOutDownLeft animation sample</div>
  <div class="wow rotateOutDownRight">rotateOutDownRight animation sample</div>
  <div class="wow rotateOutUpLeft">rotateOutUpLeft animation sample</div>
  <div class="wow rotateOutUpRight">rotateOutUpRight animation sample</div>
  <div class="wow hinge">hinge animation sample</div>
  <div class="wow jackInTheBox">jackInTheBox animation sample</div>
  <div class="wow rollIn">rollIn animation sample</div>
  <div class="wow rollOut">rollOut animation sample</div>
  <div class="wow zoomIn">zoomIn animation sample</div>
  <div class="wow zoomInDown">zoomInDown animation sample</div>
  <div class="wow zoomInLeft">zoomInLeft animation sample</div>
  <div class="wow zoomInRight">zoomInRight animation sample</div>
  <div class="wow zoomInUp">zoomInUp animation sample</div>
  <div class="wow zoomOut">zoomOut animation sample</div>
  <div class="wow zoomOutDown">zoomOutDown animation sample</div>
  <div class="wow zoomOutLeft">zoomOutLeft animation sample</div>
  <div class="wow zoomOutRight">zoomOutRight animation sample</div>
  <div class="wow zoomOutUp">zoomOutUp animation sample</div>
  <div class="wow slideInDown">slideInDown animation sample</div>
  <div class="wow slideInLeft">slideInLeft animation sample</div>
  <div class="wow slideInRight">slideInRight animation sample</div>
  <div class="wow slideInUp">slideInUp animation sample</div>
  <div class="wow slideOutDown">slideOutDown animation sample</div>
  <div class="wow slideOutLeft">slideOutLeft animation sample</div>
  <div class="wow slideOutRight">slideOutRight animation sample</div>
  <div class="wow slideOutUp">slideOutUp animation sample</div>
  <div class="wow heartBeat">heartBeat animation sample</div>
  
  <h1>End</h1>
    
</body>
</html>

■ 補足

WOWの指定

data-wow-duration：指定した時間アニメーション表示
data-wow-delay：イベントの遅延時間
data-wow-offset：画面下から何px上ぶんだけアニメーション
data-wow-iteration：指定した回数アニメーションを繰り返す

参考文献

https://qiita.com/tiwu_official/items/989834406c25deccee8b

関連記事

Material Design for Bootstrap 4 ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/37632575.html