DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場
01.WOW.jsで「フワッと」表示する
フワッとした動きを実装するなら「WOW」ライブラリを使うのが一番楽
※WOW.jsには商用利用も無料の「MIT版」商用利用は有料の「本家」
の2種類があります!
無料のMIT版を使わないとお金がかかる
animate.css
クラス名をつけるだけでアニメーションがつけられるcssパッケージ
wow.js
アニメーションのトリガーや詳細を操作できるJavaScriptパッケージ
wow.min.jsを読み込むだけじゃなく
「new WOW().init();」と記述することでwowが使えるようになる
02.wow.jsの4つのデータ属性
data-wow-duration
アニメーションにかける時間を指定
data-wow-delay
可視範囲にはいってから発動するまでの時間を指定
data-wow-offset
可視範囲に入っても発動せず、何pxスクロールされたら発動するかを指定
data-wow-iteration
アニメーションの繰り返し回数を指定 → アニメーションをリピート
この記事が気に入ったらサポートをしてみませんか?