JSFiddle - React, Tailwind, and code Playground

by yura747

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  </head>
<body>

<div class="parallax-wr">
    <div class="parallax">
    </div>
</div>

<div class="some-block">
</div>

</body>
</html>

CSS

html, body{
    margin: 0;
    padding: 0;
}

.parallax-wr {
  height: 1500px;
  width: 100%;
}

.parallax-wr>.parallax {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     background-image: url(https://images.pexels.com/photos/1650730/pexels-photo-1650730.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
     
}
.some-block {
    height: 1500px;
    width: 100%;
    background-color: gray;
}

JavaScript

$bg = $('.parallax');
    $(window).scroll(function() {
      var delta = $(window).scrollTop();

      $bg.css({
          'top':  delta / 4 ,
      });
    });