JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div id="parallax">
  <h3>Div 1</h3>
</div>
<div style="background: black;">
  <h4>Div 2</h4>
</div>

CSS

* {
  border: 0;
  padding: 0;
  margin: 0;
}

div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: Comic Sans MS;
  width: 100%;
  height: 100vh;
}

h3 {
  font-size: 40px;
  background: #eee;
  padding: 8px 24px;
  border-radius: 16px;
}

h4 {
  font-size: 25px;
  background: #eee;
  padding: 8px 24px;
  border-radius: 16px;
}

div:nth-child(1) {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1000px-Google_2015_logo.svg.png');
  background-size: cover;
  background-attachment: inherit
}

div:nth-child(2) {
  background: white;
}

JavaScript

var parallax = document.getElementById("parallax");
window.addEventListener("scroll", function() {
  let offset = window.pageYOffset;
  parallax.style.backgroundPositionY = offset * 0.5 + "px";
});