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