パララックスを実装しているのですが、それぞれのdivが可視範囲に来た時に作動させたいのですが、
1つめが見えた瞬間に全てのdivのimgタグにパララックスが対応してしまいます。
解決策をご教示いただけると幸いです。
よろしくお願いいたします。
html
1<div class="thumb"> 2 <div class="img"><img src="image/st1.jpg" alt="#"></div> 3</div> 4<div class="thumb"> 5 <div class="img"><img src="image/st1.jpg" alt="#"></div> 6</div> 7<div class="thumb"> 8 <div class="img"><img src="image/st1.jpg" alt="#"></div> 9</div> 10<div class="thumb"> 11 <div class="img"><img src="image/st1.jpg" alt="#"></div> 12</div>
scss
1.thumb { 2 width: 95%; 3 box-sizing: border-box; 4 padding: 10px; 5 .img { 6 overflow: hidden; 7 will-change: transform; 8 } 9 }
js
1(function(){ 2 3 //breakpoint 4 var break_point = 480; 5 var sp_flg = false; 6 if($(window).width() <= break_point){ 7 sp_flg = true; 8 } 9 10 //variable 11 const tgt = $(".thumb .img"); 12 const tgt_img = $(".thumb .img img"); 13 14 15 /* SCROLL_EVENT */ 16 $(window).scroll(function(){ 17 18 //scroll_top 19 let scroll_top = $(window).scrollTop(); 20 let adjust; 21 if(sp_flg){ 22 adjust = 16; 23 }else{ 24 adjust = 8; 25 } 26 27 let tgt_oft = scroll_top - tgt.offset().top; 28 TweenMax.to(tgt_img, 1, { y: tgt_oft/adjust }); 29 30 }); 31 32 33});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。