すみません、部分しか見ていないので推測になってしまいますが、
一度ついたクラス名をアニメーションが終わった時等に、外してやるといいのではないでしょうか。
おそらくfadeInDownはクラス名がついた時アニメーションをCSS等でするのだと思います。
一度クラス名をremoveClass等で外して再度クラス名をつけた時にもう一度アニメーションをするのではないでしょうか。
大雑把な言葉で申し訳ありません。
0Like
jQuery、スクロール、アニメーション、繰り返し
解決したいこと
jQueryにてスクロール時に要素をアニメーションで動かしています。
ただ一度動いた要素は2度と動かないので何度も繰り返し動くようにしたいのですが、やり方がわかりません、、
下記のようなコードをいくつも書いて各要素を動かしています。
何が必要なのかアドバイスを頂けると嬉しいです。
よろしくお願いいたします。
$(function () {
$(window).scroll(function () {
// ブラウザの表示領域をスクロールした時、{}内の処理が実行
const wHeight = $(window).height();
// （ブラウザの表示領域の高さ）を、「=」で結ばれた変数wHeightに代入
const scrollAmount = $(window).scrollTop();
// ブラウザの表示領域をスクロールした時の位置を変数「scrollAmount」に代入
$('.contents-title').each(function () {
const targetPosition = $(this).offset().top;
if(scrollAmount > targetPosition - wHeight + 60) {
$(this).addClass("fadeInDown");
}
});
});
});
0