Background Transition on Scroll

In this tutorial, you will learn how to reveal the original background with a striped transition using CSS and JavaScript. The text overlay's color will also adjust when background color changes. Watch the video below for a detailed tutorial.

HTML

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>

    <h1>Lorem Ipsum</h1>
  </div>

  <script>
    function changeWidth() {
      const columns = document.querySelectorAll('.column');
      var width = Math.min(100 - (window.pageYOffset/2));

      columns.forEach(col => {
        if(width > 0) {
          col.style.width = width + '%';
        } else {
          col.style.width = 0;
        }
      })
    }

    window.addEventListener('scroll', function() {
      requestAnimationFrame(changeWidth);
    })
  </script>

CSS

body {
  background: #c9c5b4;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 140vh;
}

.column {
  background: #2e3537;
  height: 100%;
  transition: width 1.5s;
}

h1 {
  position: fixed;
  top: 35%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 80px;
  mix-blend-mode: difference;
}