擬似クラスのスクロールに伴う挙動

Question

https://www.icon-shop.be/

上記のサイトで表現されているようなスクロールすると紫のオーバーレイがwidth: 0%;になるような挙動をjQueryで
書こうと思うとどうなるのでしょうか？

html, css共に下記までは解読できましたが、オーバレイ箇所が擬似クラスのためどうjsで記載すれば良いのかわかりません、、
どなたかご教示願います。
下記ですと当然のようにそのdivごと消えてしまいます。。。オーバーレイのみ消したいです。

<div class="overlay-anim">
          <img src="//cdn.shopify.com/s/files/1/1703/6729/collections/HP_Middlde-3843_1000x.jpg?v=1543577115" />
 </div>

overlay-anim {
	position: relative;
	display: inline-block;
}

.overlay-anim::after {
	content: ””;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #aca7ba; /*適当*/
	transition: all .5s ease-out;
	transition-delay: .6s;
}

$(window).scroll(function(){
        $('.overlay-anim').each(function(){
            var objectPosition = $(this).offset().top;
            var windowHeight = $(window).height();
            var scroll = $(window).scrollTop();
            if(scroll > objectPosition - windowHeight) {
                $(this).css("width","0%");
            }
        });
      });

Comments

[退会済みユーザー]

コードは``` ```で囲ってください。

[yourai]

わかりにくくて申し訳ありません。。。

[退会済みユーザー]

編集可能ですので...

[yourai]

書き換えました、もしよろしければご教示お願いします。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[yourai]

失礼しました、解決済とさせていただきます。また機会がありましたらご教授願います。

Answer 1

.overlay-anim.overlay-close::after {}とかを作って「閉じた時」を用意して、JavaScriptでクラスの付け外しをすればよいです。

Comments

[yourai]

回答ありがとうございます。
頭では理解できたのですが、、

.overlay-anime.overlay-close::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(0,0,0,0.8);
transition: all .5s ease-out;
transition-delay: .6s;
}

jsはif(scroll > objectPosition - windowHeight) {
$(this).addClass("overlay-close");
}

にしましたが動きません、、

[kei344]

全体像がわからないので、質問文にコードを追記してください。（決して元のコードを消さないでください）

[yourai]

コードは質問に記載しているものが全てになります。。。
jsは
$(window).scroll(function(){
$('.overlay-anim').each(function(){
var objectPosition = $(this).offset().top;
var windowHeight = $(window).height();
var scroll = $(window).scrollTop();
if(scroll > objectPosition - windowHeight) {
$(this).addClass("overlay-close");
}
});
});
に書き換えました

[kei344]

CSSは元の記述を消したのでしょうか。
https://jsfiddle.net/cv5d1rh4/
とりあえずこうすれば動きますよ。

[yourai]

確認しました、そして上記記述のスクロール可視範囲でレイヤーを外すことができました。
cssのクラスの記述ミスでした、、、orz
.overlay-anim.overlay-close::after {}の考え浮かばなかったです。。。
ありがとうございます！