Q&A
まずは思ったように書いてみてください。質問ではなく作業依頼になっています。
スクロール量に応じて画像を切り替えられるようなjQueryを書きたいですが、方法がわかりません。
例えば、0100px間ではeq(1)を、101px200pxではeq(2)を表示するといった具合です。
pic1、pic2といったように１つ１つに違うクラスを付与すると出来たのですが、imgの数が増えた時にfor文などを使って効率よく繰り返しができるようにするのはどうすれば良いですか？ご回答よろしくお願い致します。
html
1<!DOCTYPE html> 2<html> 3 <body> 4 <div class="pics"> 5 <img src="OOO" class="pic" alt=""> 6 <img src="OOO" class="pic" alt=""> 7 <img src="OOO" class="pic" alt=""> 8 </div> 9 </body> 10</html>
css
1.pic { 2 height: 100vh; 3 width: 100vw; 4}
> pic1、pic2といったように１つ１つに違うクラスを付与すると出来たのですが、
そのコードを提示してもらえますか。
回答1件
0
ベストアンサー
jQuery ではないですが、以下の質問が参考にならないでしょうか？
jQuery：スクロールして画像が可視範囲に入ったらアニメーションをスタートさせたい。
Intersection Observer API というのを使用しています。
投稿2020/05/03 13:02
総合スコア1773
返信遅れて申し訳ありません。
写真に変化を加えることができました。また、１つ目のリンクを参照にすると思い通りの動きになりました。ありがとうございました。
あなたの回答
tips
プレビュー
