Smooth Parallax Scrolling Effect With jQuery and CSS3 - SimpleParallax

File Size: 10.5 KB
Views Total: 7749
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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"
         <div>Content goes here</div>

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.


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