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 {
    position: relative;
    height: 600px;
    background: #000;
}
.content {
    height: 600px;
    background: rgb(230,10,0);
}

.paralax div {
    background-size: 100%;
    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;
}

.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 = $("body"), $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();
    $layer0.css("-webkit-transform", "translate3d(0," + -0.7 * scrolltop + "px,0)");
    $layer1.css("-webkit-transform", "translate3d(0," + -0.5 * scrolltop + "px,0)");
    $layer2.css("-webkit-transform", "translate3d(0," + -0.2 * scrolltop + "px,0)");
    
});