Parallax v1

by Bharat Soni

HTML

<div class="first">	Scroll Down</div>	
    <div class="firparalax">
		<div class="lft">lft</div>
		<div class="cnt">cnt</div>
		<div class="rit">rit</div>
	</div>

CSS

*{margin:0px;padding:0px;}
.first{
    float:left;
    width:100%;
    background-color:#933;
    height:1000px;
    text-align:center;
    color:#fff;
}
.firparalax{
    float: left;
    width:100%;
    padding-top:50px;
    height:1000px;
    background-color:#cdcdcd;
}
.lft{
    float:left;
    width:100px;
    height:150px;
    position:absolute;
    background-color:red;
    margin-left:30px;
    z-index:3;
}
.cnt{
    float:left;
    width:100px;
    height:150px;
    position:absolute;
    background-color:green;
    margin-left:30px;
    left:130px;
    z-index:3;
}
.rit{
    float:left;
    width:100px;
    height:150px;
    position:absolute;
    background-color:yellow;
    margin-left:30px;
    left:260px;
    z-index:9;
}

JavaScript

$(window).scroll(function () {
	var x = $(this).scrollTop();
	if(isVis($('.cnt')[0])){
        var x = $('.lft').offset().left,
        y = $('.rit').offset().left;
		$('.lft').offset({left:($('.lft').offset().left+20)});
		$('.rit').offset({left:($('.rit').offset().left-20)});
        //console.log();
	}
});
//this functions checks if a div is in viewport or not
function isVis(el){
    var eap,
        rect     = el.getBoundingClientRect(),
        docEl    = document.documentElement,
        vWidth   = window.innerWidth || docEl.clientWidth,
        vHeight  = window.innerHeight || docEl.clientHeight,
        efp      = function (x, y) { return document.elementFromPoint(x, y) },
        contains = "contains" in el ? "contains" : "compareDocumentPosition",
        has      = contains == "contains" ? 1 : 0x10;
    if (rect.right < 0 || rect.bottom < 0 
            || rect.left > vWidth || rect.top > vHeight)
        return false;
    return (
          (eap = efp(rect.left,  rect.top)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.right, rect.top)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.right, rect.bottom)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.left,  rect.bottom)) == el || el[contains](eap) == has
    );
}