これは非常に簡単なものです - スクロールで特定のクラス名の画像が画面に表示されることを検出する非常に基本的なスクリプトを作成しました。画像が表示されると、クラスが追加され、不透明度および移動CSSアニメーションがトリガされます。jQuery関数から簡単にjQuery関数をそれぞれに変換する際に問題が発生しました
これはうまくいきますが、同じページ上の複数の画像でこの機能を使用したいと考えています。私はeach()をスクロール関数の内側と外側の両方で使用しようとしましたが、それはスクリプトを壊します。私は正しい軌道に乗っていると信じていますが、画面に表示される画像を検出するために使用される変数は、私が通常each()関数で使用する$(this)を使用できないため、私を捨ててしまいます。
jQueryのスクリプトはここにある:元、機能スクリプトの
// Setup
$(".appear").addClass("off");
objectOffset = $(".appear").offset().top;
winHeight = $(window).height();
trigger = objectOffset - winHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > trigger) {
$(".appear").removeClass("off");
$(".appear").addClass("on");
}
});
JSフィドル(最初の画像だけで動作します):
https://jsfiddle.net/gv6qzxph/
多くのおかげでみんな。含ま壊れた試みに編集
:
// Setup
$(".appear").addClass("off");
$(".appear").each(function() {
objectOffset = $(this).offset().top;
winHeight = $(window).height();
trigger = objectOffset - winHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > trigger) {
$(this).removeClass("off");
$(this).addClass("on");
}
});
});
パーフェクト、。そして、私のエラーも明確にしてくれてありがとう。 –