<div class="wrapper">
	<span class="scroll-text">
		<span class="fl y3">H</span>
		<span class="fl y1">e</span>
		<span class="fl y4">y&nbsp;</span>
		<span class="fl y2">t</span>
		<span class="fl y4">h</span>
		<span class="fl y3">e</span>
		<span class="fl y5">r</span>
		<span class="fl y2">e</span>
		<span class="fl y4">,&nbsp;</span>
		<span class="fl y6">f</span>
		<span class="fl y1">r</span>
		<span class="fl y4">i</span>
		<span class="fl y2">e</span>
		<span class="fl y5">n</span>
		<span class="fl y2">d</span>
		<span class="fl y3">.</span>
	</span>
	<p>scroll down</p>
</div>

body{
  background: #1b2b34;
  height: 605vh;
}
.wrapper{
  position: fixed;
  width: 100%;
  height: 100%;
  color: #ccc;
}
.scroll-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  font-family: sans-serif;
  white-space: nowrap;
}
.scroll-text span.fl {
  position: relative;
  display: inline-block;
  font-size: 5rem;
}
p {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, 0);
}

$(window).scroll(function(e){parallaxScroll();});
	function parallaxScroll(){
		var scrolled = $(window).scrollTop();
		$('.y1').css({'transform': 'translate3d(0,' + scrolled * -0.15 + 'px, 0)'});
		$('.y2').css({'transform': 'translate3d(0,' + scrolled * -0.25 + 'px, 0)'});
		$('.y3').css({'transform': 'translate3d(0,' + scrolled * -0.3 + 'px, 0)'});
		$('.y4').css({'transform': 'translate3d(0,' + scrolled * -0.4 + 'px, 0)'});
		$('.y5').css({'transform': 'translate3d(0,' + scrolled * -0.5 + 'px, 0)'});
		$('.y6').css({'transform': 'translate3d(0,' + scrolled * -0.6 + 'px, 0)'});
	};