JSFiddle - React, Tailwind, and code Playground

by powerMugen

HTML

<div class="layout">
    <div class="wrap">
        <div class="fond img1" data-background-ratio="0.5">
            <p class="center deco">
                Chat 1
            </p>
        </div>
        <div class="fond img2" data-background-ratio="0.2">
            <p class="center deco">
                Chat 2
            </p>
        </div>
    </div>
</div>

CSS

/*force scroll */
html, body {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    padding:0;
    margin:0;
}
.layout {
    position: relative;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    z-index: 0;

}
.wrap {
    position: relative;
    width: 100%;
    min-height: 100%;
    left: 0;
    
min-height:1800px;   
}
.fond {margin: 80px 0;}
.img1 {background-image:url(http://lorempixel.com/output/cats-q-c-970-599-3.jpg);}
.img2 {background-image:url(http://lorempixel.com/output/cats-q-c-970-869-9.jpg);}


[data-background-ratio] {
    background-position:50% 0;
    background-repeat: no-repeat;
    height: 250px;
    position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


/*bonus*/
.center {text-align:center;}
.deco {color:#fff; font-size:30px; font-weight: bold; padding:50px 0}

JavaScript

function parallaxScroll(){
        var $item           = $('[data-background-ratio]');
        $($item).each(function(){
            var scrolled 		= $(this).offset().top,
                $itemParallax 	= $(this),
                ratio 			= $itemParallax.data('background-ratio'); 
            $itemParallax.css('background-position', '50% ' + (0-(scrolled*ratio))+'px');
            
        }); 
		
	}

$(function(){
    $('.layout').on('scroll',function(e){
        parallaxScroll();
    });
});