2 つの CSS アニメーションを表示するために、ユーザーが上下にスクロールするときにクラスを追加しようとしています。
スクロール ダウン アニメーションのみを使用している場合はうまく機能しますが、スクロール アップ アニメーションとスクロール ダウン アニメーションの両方を使用している場合は一貫性がありません。
アニメーションを連続して複数回起動するのに問題があります。インスクロールダウン一時停止、スクロールダウン一時停止、スクロールアップ一時停止、スクロールアップ一時停止として。
問題をよりよく示すための jsFiddle を次に示します。
そしてコード-
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll) {
//down scroll code
$("#repel").removeClass("climb");
$("#repel").addClass("repel").delay(1150).queue(function (next) {
$(this).removeClass("repel");
next();
});
} else {
// upscroll code
$("#repel").removeClass("repel");
$("#repel").addClass("climb").delay(1000).queue(function (next) {
$(this).removeClass("climb");
next();
});
}
previousScroll = currentScroll;
});
}());