Cacher is the code snippet organizer for pro developers

//------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);
    }
  });

});