<style>
body{
height: 600vh;
position: relative;
}
body>div{
height: 800px;
}
</style>
<body>
<div class="section1"></div>
<div class="section2">
<img src="https://picsum.photos/id/17/1400/800" alt="">
</div>
<div class="section3"></div>
</body>
<script>
$(function(){
let ev = false;
$(window).scroll(function(){
let a = $(window).scrollTop() - $(".section2").offset().top /2;
console.log(a);
if(ev){
return;
}
if(a>0){
$("html").animate({scrollTop:$(".section2").offset().top}, 5000);
setTimeout(function(){
$(".section2 > img").fadeOut(2000).fadeIn(2000);
},5000);
ev = true;
}
});
});
</script>