JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<img src="http://imapo.ru/img/clouds-bg.jpg" class="apocouds">

<div class="block">IMAPO.RU</div>

CSS

body {
  min-height: 5000px;
  margin: 0px;
  background: url(http://imapo.ru/img/clouds-bg_noise.jpg);
}

.apocouds {
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  will-change: transform;
}

.block {
  widthL 100%;
  font-size: 50px;
  text-align: center;
  background: rgba(55,55,55,.5);
  min-height: 1000px;
  margin: 50px;
}

JavaScript

$(document).scroll(function() {
    var pos = $(window).scrollTop();
    $('.apocouds').css('top', (pos * 0.7) + 'px');
});