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 |

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.