Background Parallax Animation In jQuery - backgroundParallax.js
File Size: | 5.24 KB |
---|---|
Views Total: | 2369 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
backgroundParallax.js is a really simple jQuery plugin which applies a subtle parallax scrolling effect to your background images using CSS position property.
How to use it:
1. Add your own background images to the containers using 'data-src' attribute as these:
<div class="panel" data-src="1.png"></div> <div class="panel" data-src="2.png"></div> <div class="panel" data-src="3.png"></div>
2. Set a fixed height to the container in the CSS:
.panel { height: 600px; }
3. Put jQuery library (slim build is recommended) and the jQuery backgroundParallax.js script at the bottom of the html page.
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="jQuery.parallaxBackground.min.js"></script>
4. Activate the parallax scrolling effect.
$('.panel').backgroundParallax();
5. Override the default CSS styles of your background images.
$('.panel').backgroundParallax({ css: { backgroundSize: 'cover', backgroundPosition: '50% 0', backgroundRepeat: 'no-repeat', overflow: 'hidden' } });
6. Enable/disable the parallax effect on mobile devices.
$('.panel').backgroundParallax({ isMobile: false });
This awesome jQuery plugin is developed by AminulBD. For more Advanced Usages, please check the demo page or visit the official website.