ページ内に横に3列~4列、縦に何行かのボックスがあり、スクロール操作などでボックスがウインドウ内まで来ると、ボックス内の画像を表示させたいのですが、以下のような条件で表示したく試行錯誤しています。
- 横列の表示は同時ではなく左から右へタイミングをずらす。
- ウインドウ内にまだ入っていないボックスは表示させない。
(2行目以降のボックスはウインドウ内に来ていないなら非表示のまま)
3. 横列ごとにクラス名を分けない。
html
1<div class="box-col"> 2<img class="box-none" src="img/box-image.png"></div> 3<div class="box-col"> 4<img class="box-none" src="img/box-image.png"></div> 5・ 6・
jQuery
1$(document).on("load scroll", function() { 2 var box = $(".box-col").offset().top; //ボックスの位置 3 var scTop = document.scrollingElement.scrollTop; //スクロール量 4 var winHeight = window.innerHeight; //ウインドウの高さ 5 6 // ボックスが画面の1/3以上の位置に表示されたら 7 if (scTop + winHeight > box + winHeight/3) { 8 // ボックス内の画像をタイミングをずらして表示 9 // var img = $(this).children("img"); 投稿時に書く位置を誤っておりました。 10 $(".box-col").each(function(i){ 11 var img = $(this).children("img"); // コメントに基づき修正いたしました。 12 img.delay(250 * i).removeClass("box-none", 250, "easeOutBack"); 13 }); 14 } 15}); 16
「表示タイミングをずらすのにeachを使用」+「ボックスのクラス名が同じ」だと当然ウインドウ内に入っていないボックスにも処理が伝播していってしまうので、横列ごとに"box-col-01","box-col-02"とクラス名を付けて、jQueryの処理もクラス名ごとで行うと一応希望したようにはなります。
しかしこのやり方では縦列が多くなってくるとクラス名が増えて効率が悪いため、できれば横列ごとにクラス名を付ける以外で解決したいです。
1.か2.のどちらかを諦めると横列ごとにクラス名を分けなくても上手くいくのですが...
どうかご指南いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/28 09:47