前提・実現したいこと
コーディング歴は半年で、js はプラグインに頼るばかりであまり経験がありません。
よろしくお願いいたします。
下記の一連の動作を js または jQuery で作る方法を教えていただきたいです。
- スクロールで画像がフェードイン
- フェードインした画像のみスクロールの監視が終了
- その他の画像はフェードインするまでスクロールの監視が継続
- 最終的に、すべての画像のフェードインが完了すると
スクロールによる監視は完全に終了
発生している問題
上記2番目の「フェードインした画像のみスクロールの監視が終了」
という部分の実装ができません。
該当のソースコード
【html】
<p><img class="fade" src="" alt=""></p>
<p><img class="fade" src="" alt=""></p>
<p><img class="fade" src="" alt=""></p>
<p><img id=“js-stop” class="fade" src="" alt=""></p> <!-- これがフェードインすると監視終了 -->
【css】
.fade {
opacity : 0;
transition: opacity 2s;
}
.fade-in {
opacity: 1;
}
【JavaScript】
// スクロール量を検知し、フェードインする
function animation() {
$('.fade').each(function () {
var target = $(this).offset().top;
var scroll = $(window).scrollTop() - 200;
var windowHeight = $(window).height();
if (scroll > target - windowHeight) {
$(this).addClass('fade-in');
}
});
}
// #js-stop(4つ目の画像)がフェードインすると監視終了
animation();
var stop = document.getElementById('js-stop');
$(window).scroll(function () {
if (stop.classList.contains('fade-in') == true) {
return false;
} else {
animation();
}
});
試したこと
「.fade-in が付与されたら、その要素だけは監視を終了する」
という解釈になると思うのですが、具体的な方法に検討がつきません。
考えた挙句に上記の「#js-stop(最後の画像)に .fade-in が付与されたら終了する」という処理になりました。
以上が質問です。
よろしくお願いいたします。