Smooth Parallax Scrolling Effect With jQuery and CSS3 - SimpleParallax

Just another jQuery plugin (~1kb) that uses CSS3 transitions to apply a smooth vertical parallax scrolling effect to your background images.

How to use it:

1. Include both jQuery library and the jQuery SimpleParallax plugin's script at the bottom of your html page.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="simple.parallax.js"></script> 

2. Add the required CSS class 'parallax' to your parallax container and specify the scrolling speed using data-parallax-speed attribute.

<section class="parallax" id="section-one"
         data-parallax-speed="20">
         <div>Content goes here</div>
</section>

3. Add a background image to the parallax container.

#section-one { 
  background-image: url("parallax.jpg"); 
}

4. Make the background image always be centered in the container and create smooth parallax scrolling effect using CSS3 transition property.

.parallax {
  background-repeat: no-repeat;
  background-position: 50% 0;
  -webkit-transition: background-position .2s ease-in;
  -moz-transition: background-position .2s ease-in;
  -o-transition: background-position .2s ease-in;
  transition: background-position .2s ease-in;
  -webkit-background-size: cover;
  background-size: cover;
}

5. Active the parallax scrolling effect on the background image when vertical page scrolling.

$('.parallax').sparallax();

---

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