JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<div class="content">
    <div class="welcome">Welcome</div>
    <div class="intro">Intro</div>
    <div class="sign-up">Sign Up</div>
</div>
<div class="welcome-bg" data-0="opacity:1;" data-100p="opacity:0;"></div>
<div class="intro-bg" data-100p="opacity:1;" data-200p="opacity:0;"></div>
<div class="sign-up-bg" ></div>

SCSS

.welcome-bg, .intro-bg, .sign-up-bg{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:100%;
}

.welcome-bg{
    background: blue url('http://wallpicshd.com/wp-content/uploads/2013/06/Landscape-04-HD-Wallpaper.jpg') center center fixed;
    background-size:cover;
    z-index:-2;
}
.intro-bg{
  background: green url('http://www.hdwallpapers.in/walls/sunflower_landscape-wide.jpg') center center fixed;
  z-index:-3;
}
.sign-up-bg{
  background: red url('http://www.hdwallpaperstop.com/wp-content/uploads/2013/05/Beautiful-Landscape-Pictures-of-nature.jpg') center center fixed;
  z-index:-4;
}

JavaScript

skrollr.init({
    smoothScrolling: true,
    forceHeight: false
});

var maxWidth = $(window).width();
var maxHeight = $(window).height();

$(document).ready(function(){
    $('.welcome, .intro, .sign-up').css({
        width: maxWidth,
        height: maxHeight
    });
});

 $( window ).resize(function() {
 var maxWidth = $(window).width();
 var maxHeight = $(window).height();
 $('.welcome, .intro, .sign-up').css({
        width: maxWidth,
        height: maxHeight
});   
});