JSFiddle - React, Tailwind, and code Playground
HTML
<div id="body">
<div class="slide_wrapper" id="slide_wrapper1">
<div class="slide" id="slide1"></div>
</div>
<div class="slide_wrapper" id="slide_wrapper2">
<div class="slide" id="slide2"></div>
</div>
<div class="slide_wrapper" id="slide_wrapper3">
<div class="slide" id="slide3"></div>
</div>
<div class="slide_wrapper" id="slide_wrapper4">
<div class="slide" id="slide4"></div>
</div>
<div class="slide_wrapper" id="slide_wrapper5">
<div class="slide" id="slide5"></div>
</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body{background-color:black;}
#body{
margin: 0 auto;
width: 800px;
}
.slide {width: 100%; height: 560px;}
#slide1{
background-image: url("http://habrastorage.org/storage2/2f7/929/564/2f79295641bf9c3da1b2179146f0a816.jpg");
}
#slide2{
background-image: url("http://habrastorage.org/storage2/96b/e3b/e14/96be3be1472d84d4dccf110b1739c0bb.jpg");
}
#slide3{
background-image: url("http://habrastorage.org/storage2/d13/db5/cc8/d13db5cc8ed8363138947d4ce35134e3.jpg");
}
#slide4{
background-image: url("http://habrastorage.org/storage2/364/595/e8a/364595e8a510f97c49a5e600f310de6d.jpg");
}
#slide5{
background-image: url("http://habrastorage.org/storage2/637/8c2/8a0/6378c28a05fdcaf00861a5a3ecb8ca35.jpg");
}
JavaScript
jq = jQuery.noConflict();
function aldparallax(_parent, _blocks, _callback)
{
var me = this;
var parent = jq(_parent);
var elements = parent.find(_blocks);
var callbacks = _callback;
me.recalcPositions = function()
{
var wTop = jq(window).scrollTop();
var wHeight = jq(window).height();
var wBottom = wTop+wHeight;
var states = new Array();
elements.each(
function()
{
var th = jq(this);
var id = th.attr('id');
var box = new Array();
box['wTop'] = wTop;
box['wBottom'] = wBottom;
box['wHeight'] = wHeight;
var offset = th.offset();
var eTop = offset.top;
var eBot = eTop+th.height();
box['iTop'] = eTop;
box['iBottom'] = eBot;
...