jQueryでスクロールのたびにアニメーションを使うには、
Waypoints.jsとAnimate.cssという2つのライブラリを併用します。
addclassとremoveClassを記入することでスクロールのたびに
アニメーションを動かすことが可能です。
Waypoints.jsを読み込み
waypoints.jaのdownloadボタンからダウンロード。
libフォルダの中にあるjquery.waypoints.min.jsというファイルだけを
アニメーションを作業中のHTMLと同じディレクトリに格納し読み込みを行う。
index.html
<!-- </body>の直前に置く --><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script src="jquery.waypoints.min.js"></script>Animate.cssを読み込み
Animate.cssから
サイトの「Download Animate.css」を右クリック
→別名で保存し、ダウンロードしたanimate.cssを
作業中のHTMLと同じディレクトリに格納。
そして、HTML内で格納
index.html
<!-- <head>内に置く --><linkrel="stylesheet"href="animate.css">スクロールのたびにアニメーションを繰り返す方法
アニメーションを加えたい部分にanimatedクラスと
fadeInUpなど動きのアニメーションのクラスをつける。
(Animate.cssからアニメーションは確認できます)
アニメーションを繰り返すために、
その都度アニメーションクラスを消すために
main.js側でremoveClassが必要です。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>Animate Test</title><!-- Animate.cssの読み込み --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css"><style>body{background:repeating-linear-gradient(0deg,#ffffff,#ffffff40px,#dedede40px,#dedede80px);}.boxes{margin:80vhauto;}.box{border:1pxsolid#000;width:10em;padding:10px;margin:2emauto;text-align:center;}.animated{/* 最初から非表示 */opacity:0;}</style></head><body><divclass="boxes"><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div><divclass="box animated">box</div></div><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><!-- Waypoints.jsを読み込む --><script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script><script src="main.js"></script></body></html>main.js
/**
* animatedクラスを持つ要素が画面内に入ったら
* Animate.cssのfadeInUpエフェクトを適用
*/$('.animated').waypoint({handler(direction){if(direction==='down'){$(this.element).addClass('fadeInUp');/* removeClassをつけることで繰り返しアニメーションcssが繰り返される */$(this.element).removeClass("fadeOutUp")}elseif(direction==="up"){$(this.element).addClass("fadeOutUp")/*上にスクロール時にfadeInUpクラスが削除される */$(this.element).removeClass("fadeInUp")}},/**
* 要素の上端が画面のどの位置に来たときにhandlerメソッドを呼び出すか指定
* 0%なら画面の一番上、100%なら画面の一番下に来たときに呼び出される
*/offset:'50%',});addClassとremoveClassをセットにすることで
スクロールを何度繰り返してもアニメーションが反映されました。