JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section1"><h1>section1</h1></div>
 <div id="section2"><h1>section2</h1></div>
 <div id="section3"><h1>section3</h1></div>

CSS

*{ margin: 0; padding: 0;}
 #section1{ width: 100%; height: 650px; background: url("http://www.wallsave.com/wallpapers/1280x960/abstact-red/186157/abstact-red-abstract-balls-186157.jpg");}
 #section2{ width: 100%; height: 650px; background: url("http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg");}
 #section3{ width: 100%; height: 650px; background: url("http://wonderfulengineering.com/wp-content/uploads/2014/01/Technology-Wallpaper-6.jpg");}
 h1{ color: chartreuse; text-align: center; line-height: 650px;} 
 #section2 h1{ color: #fff;}

JavaScript

$( window ).scroll(function() {
 var val = $(window).scrollTop();
 $("#val").text(val);
 $("#section1").css({"background-position":"-"+val*2+"px 50%"});
 $("#section2").css({"background-position":"50% -"+val*2+"px"});
 $("#section3").css({"background-position":val*2+"px 50%"}); });