<style>
.box-container{
width: 400px;
height: 200px;
margin: 0 auto;
padding: 500px 0 500px;
}
.box {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
transition:all 1s;
}
.box:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .9);
transition:all 1s;
}
.isPlay{
transition:all 1s;
}
.isPlay:before {
transform: translate3d(100%, 0, 0);
}
</style>
</head>
<body>
<div class="box-container">
<div class="box">
<p>テキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適すテキストテキスト適す</p>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script>
$(window).on('load scroll', function (){
var box = $('.box');
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);
}
});
});
</script>
