JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<header id="lorem" class="animate">    
  <div class="Hero-Text">
    <h1>Simple Parallax Scrolling</h1>
    <h2>Using Javascript</h2>
  </div>
</header>
<section>
  <div class="content">
    <h2>Parallax</h2>
    <h4>Javascript Code</h4>
    <hr>
    <xmp>
      <script>
        window.addEventListener('scroll' , function(){
          const BgImg = document.querySelector('header img');
          let WinPos  = window.pageYOffset;
          BgImg.style.transform = "translateY(" + WinPos * .35 + "px)";
        });
      </script>
    </xmp>
  </div>       
</section>
<header class="animate">    
  <div class="Hero-Text">
    <h1>Simple Parallax Scrolling</h1>
    <h2>Using Javascript</h2>
  </div>
</header>

CSS

*{
            padding: 0px;margin: 0px;box-sizing: border-box;scroll-behavior: smooth;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        header , section {
            height: 100vh;width: 100%;
            overflow: hidden;
        }
        header img{
            height: 100%;width: 100%;
            position: absolute;z-index: -1;
            filter: brightness(.5);pointer-events: none;
        }
        header{
          background-image: url('https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: left 50% top 50%;
        }
        header .Hero-Text{
            height: 100%;width: 100%;
            display: flex;flex-direction: column;
            justify-content: center;align-items: center;
            color: #fff;pointer-events: none;
        }

        section{
            background-color: rgb(54, 98, 243);display: flex;
            justify-content: center;
            align-items: center;
            font-size: large;
            color: #fff;
        }
section .content{border: 2px solid; border-radius: 10px; padding: 25px;}

JavaScript

window.addEventListener('scroll' , function(){
  const BgImg = document.getElementById('lorem');
  let WinPos  = window.pageYOffset;
  BgImg.style.backgroundPosition="left 50% top +"+ ( 50 + WinPos * 0.35) +"%";
});