Minimalist Background Parallax Effect with jQuery - Paralaxbg.js

File Size: 10.1 KB
Views Total: 4793
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist Background Parallax Effect with jQuery - Paralaxbg.js

Paralaxbg.js is a minimalist jQuery script for creating background parallax effect that make your background images move slower than foreground content as you scroll down the webpage.

How to use it:

1. Load the jQuery Paralaxbg.js plugin after loading jQuery JavaScript library.

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

2. Add a parallax background image to your container.

<div class="paralaxbg" style="background-image:url(bg.jpg)">
  ...
</div>

3. Initialize the plugin and done.

initParalaxBg();

4. Change the animation speed using the data-paralaxbg-speed attribute.

<div class="paralaxbg" 
     data-paralaxbg-speed="2"
     style="background-image:url(bg.jpg)">
  ...
</div>

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