JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style="height: 200vh"></div>
<div id="reservation">
    <img class="cover" src="https://picsum.photos/id/145/1200/900" alt="">
</div>
<div style="height: 100vh"></div>

JavaScript

var kufuna_parallax = function(){
  if ($(window).innerWidth() > 1023) {
  var a = $('#reservation');
  var b = $(window).innerHeight();
  var c = $(window).scrollTop();
  var e = $('#reservation .cover');
  a.each(function(i){
    var c = $(window).scrollTop();
    if ( $(a[i]).offset().top - b < c) {
      $(a[i]).find('.cover').css({ opacity : ( ( c - ( $(a[i]).offset().top - b ) ) / 500) , transition : '.5s'})
    }
  })
  }else {
    $('#reservation').find('.cover').css({ opacity : 0 })
  }
}
kufuna_parallax();
$(window).resize(kufuna_parallax);
$(window).scroll(kufuna_parallax);