Easy Background Parallax Scrolling Effect with jQuery - Parallax

File Size: 4.03 MB
Views Total: 17942
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  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.

  image : "bg.jpg",
  height : "400",
  scroll : "manual"

$(document).scroll(function() {          
  var scrollPosition = $(this).scrollTop();

Change log:


  • Project restructuring.


  • 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.