Parallax Demo

by Prasad

HTML

<section id="home" data-type="background" data-speed="15">
	<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="15">
	<article>Simple Parallax Scroll</article>
</section>
<section id="home" data-type="background" data-speed="15">
	<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="15">
	<article>Simple Parallax Scroll</article>
</section>

CSS

@charset "utf-8";
/* CSS Document */

#home {
	background:url(../images/home.jpg) 50% 0 repeat fixed;
	height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative; 
}
#home article {
	height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%; 
  text-indent: -9999px;
	background:url(../images/intro.png) center top no-repeat;
}
#about {
	background:url(../images/about.jpg) 50% 0 no-repeat; 
	height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
	height: 458px;
  position: absolute;
 
  top: 150px;
  width: 100%;
  text-indent: -9999px;
 
background:url(../images/simple.png) center top no-repeat;
}

JavaScript

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
     
        $(window).scroll(function() {
            var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
             
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';
 console.log();
            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        });
    });   
});