<h1>Scroll Me 😁</h1>

<div id="flex-container">
  <div class="parallax-container">
    <div class="parallax-content" id="parallax-content1">
      <h2>Twice as fast</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax-content" id="parallax-content2">
       <h2>Regular</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
    </div>
  </div>
  <div class="parallax-container3">
    <div class="parallax-content" id="parallax-content3">
      <h2>Half the speed</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dignissim augue, eu commodo lacus. Curabitur a rutrum enim, in eleifend nulla. Sed id magna semper, mollis lacus non, efficitur urna. Proin ornare consectetur libero eu luctus. Suspendisse luctus nulla et purus vestibulum, ut porttitor nisi scelerisque. Integer quis neque eget turpis viverra rutrum. In sollicitudin lobortis risus eget tempor. Duis finibus, erat tempus euismod congue, nisi nisi volutpat ex, sed tincidunt lectus turpis ac felis. Ut eu nibh lorem. Sed massa quam, egestas commodo lorem euismod, malesuada ultricies dolor. Donec quis imperdiet urna. Phasellus et finibus odio.</p>
    </div>
  </div>
</div>

body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

#flex-container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 0 100vh;
}
.parallax-container {
  max-width: calc(100%/3);
}
.parallax-content {
  padding-top: 100vh;
}

window.onscroll = function(el) {
  var calcTwice = 'calc(100vh - ' + (document.documentElement.scrollTop * 2) + 'px)',
      calcHalf = 'calc(100vh + ' + (document.documentElement.scrollTop / 2) + 'px)';
  document.getElementById('parallax-content1').style.paddingTop = calcTwice;
  document.getElementById('parallax-content3').style.paddingTop = calcHalf;
}