DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場

01.WOW.jsで「フワッと」表示する

フワッとした動きを実装するなら「WOW」ライブラリを使うのが一番楽

※WOW.jsには商用利用も無料の「MIT版」商用利用は有料の「本家」
の２種類があります！
無料のMIT版を使わないとお金がかかる

animate.css
クラス名をつけるだけでアニメーションがつけられるcssパッケージ

wow.js
アニメーションのトリガーや詳細を操作できるJavaScriptパッケージ

wow.min.jsを読み込むだけじゃなく
「new WOW().init();」と記述することでwowが使えるようになる

02.wow.jsの４つのデータ属性

data-wow-duration
アニメーションにかける時間を指定

data-wow-delay
可視範囲にはいってから発動するまでの時間を指定

data-wow-offset
可視範囲に入っても発動せず、何pxスクロールされたら発動するかを指定 

data-wow-iteration
アニメーションの繰り返し回数を指定 → アニメーションをリピート