JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div id="section1" class="bgEffect" data-speed="15">
    <article> <h1>Why so serious?</h1> 
        <p>Why so serious?  </p> 
    </article> 
</div> 
<div id="section2" class="bgEffect" data-speed="20"> 
    <article> <h1>I am a monster!</h1> 
        <p>I am a monster! </p> 
    </article> 
</div>

CSS

* {
    margin:0; 
    padding: 0;
} 

html, body {
    height:100%;
} 

.bgEffects { 
    font-family: 'Elsie', cursive; 
    color:#FFF; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    min-height: 100%; 
    text-shadow:0 0 10px rgba(0,0,0,0.7); 
} 

#section1 {
    height:100%;
    background: url('http://www.bubblews.com/assets/images/news/1343361155_1389776337.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

#section2 { 
    height:100%;
    background: url('http://www.mrwallpaper.com/wallpapers/Joker-Batman-Art-1920x1200.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
    -webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7); 
    -moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7); 
    -ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7); 
    -o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7); 
    box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7); 
} 

.bgEffect article {
    width: 70%; 
    text-align: center; 
    margin:0 auto; 
} 

article h1 {
    font-size:40px;
    color: #ffffff;
} 

article p {
    font-size:20px;
    margin-top:25px;
    color: #ffffff;
}

JavaScript

$('div.bgEffect').each(function(){ 
    var $obj = $(this); $(window).scroll(function() { 
        var yPos = -($(window).scrollTop() / $obj.data('speed')); 
        var bgpos = '50% '+ yPos + 'px'; $obj.css('background-position', bgpos ); 
    }); 
});