//------CSS-------
@mixin curtain-anim{
position: relative;
overflow: hidden;
&::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.9);
transition: 1s cubic-bezier(.7,.01,.46,.1);
}
}
.isPlay:before{
transform:translate3d(100%,0,0);
}
.curtain-anim{
@include curtain-anim;
}
//------js-------
$(window).on('load scroll', function (){
var box = $('.curtain-anim');
var isPlay= 'isPlay';
box.each(function () {
var boxOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
if(scrollPos > boxOffset - wh + (wh / 2) ){
$(this).addClass(isPlay);
}else{
$(this).removeClass(isPlay);
}
});
});