parallax bg scroll
by Nikhil krishnan
HTML
<div class="wrapper">
<span class="paralax-panel">dgzdf</span>
</div>
CSS
.wrapper{
height:1500px;
float:left;
width:100%;
}
.paralax-panel{
margin-top:200px;
background-image:url(http://images.eurogamer.net/2014/usgamer/Banner-Saga-Screenshot-01.jpg);
display:block;
float:left;
width:100%;
height:200px;
}
JavaScript
//paralax
ofSt = $('.paralax-panel').offset().top
$(window).scroll(function(){
var wSv = $(window).scrollTop();
nPs = wSv - ofSt
var bgpos = $('.paralax-panel').css('backgroundPosition').split(' ');
if( wSv > (ofSt - $(window).height()) ){
$('.paralax-panel')
.css('backgroundPosition', bgpos[0] + ' ' + nPs + 'px');
}
});