Simple Parallax Scrolling Effect with jQuery and CSS3 - Efecto Parallax

Yet another Parallax plugin based on jQuery and CSS3 to create background image parallax scrolling effect when scrolling down/up the page.

How to use it:

1. Load the latest version of jQuery javascript library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2. Markup html structure. Set the speed option via data-speed attribute.

<section id="section1" data-type="parallax_section" data-speed="10">
Section 1
</section>

<section id="section2" data-type="parallax_section" data-speed="10">
Section 2
</section>

<section id="section3" data-type="parallax_section" data-speed="10">
Section 3
</section>

...

3. The required CSS styles.

#section1 {
background: url(images/bg_0.jpg) 50% 0 no-repeat fixed;
min-height: 700px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#seccion2 {
background: url(images/bg_1.jpg) 50% 0 no-repeat fixed;
min-height: 700px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#section3 {
background: url(images/bg_2.jpg) 50% 0 no-repeat fixed;
min-height: 700px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

4. The javascript.

<script>
$(document).ready(function(){
$('section[data-type="parallax_section"]').each(function(){
var $bgobj = $(this); // Variable para asignacion de objeto
$(window).scroll(function() {
$window = $(window);
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});

</script>

---

This awesome jQuery plugin is developed by Creativohn. For more Advanced Usages, please check the demo page or visit the official website.