JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div class="paralax">
        <div class="l1"></div>
        <div class="l2"></div>
        <div class="l3"></div>
        <div class="l4"></div>  
    </div>
    <div class="content">
       
    </div>
</article>

CSS

article {
    display: block;
}
.paralax {
    margin-top: 1000px;
    position: relative;
    height: 600px;
    background: #000;
    overflow:hidden;
}
.content {
    height: 3600px;
    background: rgb(230,10,0);
}

.paralax div {
    top:0;
    left: 0;
    width: 100%;
    position: absolute;
    height: 600px;
}

.l1 {
    background: url(https://dl.dropbox.com/u/776979/rhb/bg_s1.png) center top no-repeat;
}

.l2 {
    top: -60px;
    background: url(https://dl.dropbox.com/u/776979/rhb/text.png) center top no-repeat;
}


.l3 {
    background: url(https://dl.dropbox.com/u/776979/rhb/foreground_s1.png) center top no-repeat;
}

.paralax .l4 {
    background: url(https://dl.dropbox.com/u/776979/rhb/blur_s1.png) center top no-repeat;
}

JavaScript

var $win = $(window), $layers = $(".paralax > div"),$bodyhtml = $("html"), $layer0,$layer1,$layer2,$layer3 ;


$layer0 = $layers.eq(0);
$layer1 = $layers.eq(1);
$layer2 = $layers.eq(2);
$layer3 = $layers.eq(3);

$win.on("scroll", function(){
    var scrolltop = $bodyhtml.scrollTop() - 1000;
    $layer0.css("-moz-transform", "translate(0," + 0.7 * scrolltop + "px)");
    $layer1.css("-moz-transform", "translate(0," + 0.6 * scrolltop + "px)");
    $layer2.css("-moz-transform", "translate(0," + 0.5 * scrolltop + "px)");
    $layer3.css("-moz-transform", "translate(0," + 0.1 * scrolltop + "px)");
    //$layer3.css("-webkit-transform", "translate3d(0," + 1 * scrolltop + "px,0)");
    
});