上記のサイトで表現されているようなスクロールすると紫のオーバーレイがwidth: 0%;になるような挙動をjQueryで
書こうと思うとどうなるのでしょうか?
html, css共に下記までは解読できましたが、オーバレイ箇所が擬似クラスのためどうjsで記載すれば良いのかわかりません、、
どなたかご教示願います。
下記ですと当然のようにそのdivごと消えてしまいます。。。オーバーレイのみ消したいです。
html
1<div class="overlay-anim"> 2 <img src="//cdn.shopify.com/s/files/1/1703/6729/collections/HP_Middlde-3843_1000x.jpg?v=1543577115" /> 3 </div>
css
1overlay-anim { 2 position: relative; 3 display: inline-block; 4} 5 6.overlay-anim::after { 7 content: ””; 8 display: inline-block; 9 position: absolute; 10 top: 0; 11 left: 0; 12 width: 100%; 13 height: 100%; 14 background-color: #aca7ba; /*適当*/ 15 transition: all .5s ease-out; 16 transition-delay: .6s; 17}
js
1$(window).scroll(function(){ 2 $('.overlay-anim').each(function(){ 3 var objectPosition = $(this).offset().top; 4 var windowHeight = $(window).height(); 5 var scroll = $(window).scrollTop(); 6 if(scroll > objectPosition - windowHeight) { 7 $(this).css("width","0%"); 8 } 9 }); 10 });
回答1件
あなたの回答
tips
プレビュー