デイトラWeb制作コース中級編DAY24 スクロールに応じて要素を「フワッ」と登場させる

基本ははにわまんさんの記事をどうぞ。

https://haniwaman.com/wow/

WordPress上で使用するにあたっては以下のページを参考にしました。

https://a-m-t.co.jp/wow-js/

サンプル

bounce

pulse

shake

swing

wobble

bounceIn

bounceInLeft

bounceInUp

bounceOutDown

bounceOutRight

fadeIn

fadeInDownBig

fadeInLeftBig

fadeInRightBig

fadeInUpBig

fadeOutDown

fadeOutLeft

fadeOutRight

fadeOutUp

flipInX

flipOutX

lightSpeedIn

rotateIn

rotateInDownRight

rotateInUpRight

rotateOutDownLeft

rotateOutUpLeft

hinge

rollIn

slideInDown

slideInRight

slideOutDown

slideOutRight

4つのデータ属性

３秒かけてアニメーションを実行

可視範囲に入って0.5秒後にアニメーションを開始

可視範囲に入ってさらに100pxスクロールされたらアニメーションを開始

アニメーションを3回繰り返す

次回は「スマホ時のドロワーメニューを作る」です。