<section>
  <h1>A Simple Fade Effect on Scroll</h1>
  <div class="img-wrapper">
    <div style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-back.jpg);"></div>
    <div class="front" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-front.jpg);"></div>
  </div>
</section>

<section>
  <p>
    The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore. The coastline, the five villages, and the surrounding hillsides are all part of the Cinque Terre National Park a UNESCO World Heritage Site.
  </p>
  <p>
    The Cinque Terre area is a popular tourist destination. Over the centuries, people have built terraces on the rugged, steep landscape right up to the cliffs that overlook the sea. Paths, trains and boats connect the villages as cars can reach them from the outside only via narrow and precarious mountain roads with great difficulty.
  </p>
</section>

:root {
  --gray: #ededed;
  --red: #e74c3c;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font: 20px/30px sans-serif;
}

h1 {
  padding: 0 15px;
  margin: 10vh 0;
  line-height: normal;
  text-align: center;
}

.img-wrapper {
  display: grid;
  height: 100vh;
}

.img-wrapper div {
  grid-column: 1;
  grid-row: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray);
  transition: opacity 0.1s;
}

section:last-of-type {
  max-width: 800px;
  padding: 0 15px;
  margin: 15vh auto;
}

section:last-of-type p + p {
  margin-top: 20px;
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  font-size: 16px;
  line-height: normal;
  text-align: center;
  padding: 0 20px 10px;
}

.page-footer span {
  color: var(--red);
}
const checkpoint = 300;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= checkpoint) {
    opacity = 1 - currentScroll / checkpoint;
  } else {
    opacity = 0;
  }
  document.querySelector(".front").style.opacity = opacity;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.