<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">

<section>
  <div id="parallax" class="parallax-item">
    <h2>Div 1</h2>
  </div>
  <div class="parallax-item">
    <h2>Div 2</h2>
  </div>
  <div class="parallax-item">
    <h2>Div 3</h2>
  </div>
  <div class="parallax-item">
    <h2>Div 4</h2>
  </div>
</section>

* {
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

.parallax-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: Montserrat, sans-serif;
  width: 100%;
  min-height: 100vh;
}

.parallax-item h2 {
  font-size: 3rem;
  text-transform: uppercase;
  background-color: whitesmoke;
  padding: 1rem;
  border-radius: 1rem;
}

.parallax-item:first-child {
  background: url("https://images.unsplash.com/photo-1663305411753-4c305e177ff3?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5NDA4ODE&ixlib=rb-1.2.1&q=80");
  background-size: cover;
}

.parallax-item:nth-child(2) {
  background: #fdd835;
}

.parallax-item:nth-child(3) {
  background: url("https://images.unsplash.com/photo-1663183539627-adbe2c8ef43d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5Mzk5ODc&ixlib=rb-1.2.1&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax Effect for DIV 3 */
  min-height: 600px;
}

.parallax-item:nth-child(4) {
  background: #1565c0;
}

@media screen and (max-width: 768px) {
  .parallax-item h2 {
    font-size: 1.5rem;
  }
}

const parallax = document.getElementById("parallax");

// Parallax Effect for DIV 1
window.addEventListener("scroll", function () {
  let offset = window.pageYOffset;
  parallax.style.backgroundPositionY = offset * 0.7 + "px";
  // DIV 1 background will move slower than other elements on scroll.
});