JSFiddle - React, Tailwind, and code Playground
HTML
<div id="dos">
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa
</div>
<div id="uno">
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa<br />
holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa holaaaaaaaaa...
CSS
* {
padding: 0;
margin: 0;
color: #fff;
}
div {
position: relative;
height: 1000px;
overflow: hidden;
padding: 50px;
}
#uno {
background: url(http://www.fashiontargetsbreastcancer.org.au/Assets/images/panel_about_bg.jpg) 0 100% no-repeat;
}
#tres {
background: url(parallax2.jpg) 0 0 no-repeat;
}
JavaScript
$(document).ready(function(){
var $w = $(window);
var offset = $('#uno').offset().top;
var $u = $('#uno');
function move($c) {
var scroll = $w.scrollTop();
var diff = offset - scroll;
var pos = '50% ' + (-diff)*0.5 + 'px';
$c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
move($u);
});
});