JSFiddle - React, Tailwind, and code Playground

by sambaldwin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<section>
  <h1>
    <span class="plate-1">prepress</span>
    <span class="plate-2">prepress</span>
    <span class="plate-3">prepress</span>
  </h1>
</section>
<section>
  Sign up for info
</section>

CSS

body {
  margin: 50px;
  background-color: #fff;
}

section {
  height: 100vh;
}

h1 {
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  font-family: "helvetica neue";
  font-size: 400%;
  font-weight: 400;
  margin-top: 20vh;
  line-height: 1;
  position: relative;
  color: yellow;
}

.plate-1,
.plate-2,
.plate-3 {
  position: absolute;
  left: 0;
  mix-blend-mode: multiply;
}

.plate-1 {
  color: cyan;
}
.plate-2 {
  color: magenta;
}

JavaScript

$(window).scroll(function () { 

   $('.plate-1').css({
      'top' : -($(this).scrollTop()/2)+"px"
   }); 
   
   $('.plate-2').css({
      'top' : -($(this).scrollTop()/4)+"px"
   });  

});