カーテンが開くアニメーション

www.aolani-ohana.com

html

<div class="box">
<div class="box-inner top">
<img src="https://picsum.photos/1000/400" alt="">
</div>
</div>

jquery

$(function(){
$(window).on('scroll resize',function(){
var elmHeight=$('.box').outerHeight();//対象要素の高さ

$('.box').each(function(){
var setElm=$(this).children('.box-inner');//addしたい要素
var elmTop=$(this).offset().top;//画面topから対象要素のtopまでの距離
var winHeight=$(window).height();//1画面分の高さ
var scrTop=$(window).scrollTop();//自分がスクロールした量
console.log(setElm);


//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
if(scrTop > elmTop - winHeight + elmHeight){
setElm.addClass('curtain');
}else{
setElm.removeClass('curtain');
}
});
});
});