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