JSFiddle - React, Tailwind, and code Playground

by Rafael_

HTML

<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>

<div class="parallax" id="parallax">
  <div class="parallax-content">
    Content at normal speed
  </div>
</div>

<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>

CSS

.parallax {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: url('https://placehold.co/600x600') center/cover no-repeat;
}
.parallax-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
}

JavaScript

const parallaxContainer = document.getElementById('parallax');
  const parallaxContent = parallaxContainer.querySelector('.parallax-content');

  parallaxContainer.addEventListener('scroll', function() {
    const scrollTop = parallaxContainer.scrollTop;
    parallaxContent.style.transform = `translate(-50%, -${scrollTop}px)`;
  });