Easy Background Parallax Scrolling Effect with jQuery - Parallax

Just another jQuery plugin that add a subtle parallax scrolling effect to background images with image preloader on vertical page scrolling.

How to use it:

1. Place jQuery library and the jQuery parallax plugin's JS and CSS files into your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<link href="src/css/parallax.css" rel="stylesheet">
<script src="src/js/parallax.js"></script>

2. Add the CSS class 'parallax' and a theme class of your choice to the container. Available theme classes: 

• .parallax-default
• .parallax-dark
• .parallax-light

<div id="example" class="parallax parallax-dark"></div>

3. Call the function and specify the parallax image for the background.

$("#example").parallax({
  image : "bg.jpg",
  height : "400", height of the container in pixels
});

4. You can also add a background image to the container in the CSS.

#example {
  background: url(bg.jpg) no-repeat 0px 0px;
  background-size: 100% auto;
}

5. Customize the scroll function.

$("#example").parallax({
  image : "bg.jpg",
  height : "400",
  scroll : "manual"
});

$(document).scroll(function() {          
  var scrollPosition = $(this).scrollTop();
  $("#example").parallaxScroll(scrollPosition);
});

Change log:

2018-06-10

• Project restructuring.

2015-12-03

• Preloader now takes 100% of the container.

---

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