Tiny Fixed And Scroll Parallax Effect Plugin For jQuery - easyParallax
File Size: | 7.8 KB |
---|---|
Views Total: | 1724 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
easyParallax is a very small jQuery plugin which applies the 'Fixed' and/or 'Scroll' parallax effects to any container elements when scrolling down the webpage. Heavily based on CSS3 3D transforms.
Basic usage:
1. Just load the core JavaScript file easy.parallax.js
after jQuery library and you're ready to go.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="js/easy.parallax.js"></script>
2. Add the CSS class 'parallax' to your parallax container and specify the background image using data-image-src
attribute as follow.
<div class="parallax" data-image-src="bg.jpg"> </div>
3. That's it. You can also initialize the parallax plugin by calling the function on the target container like this:
$('.parallax').easyParallax();
4. Default options to customize the parallax effect. You can also pass the following options using data-option
attribute directly on the parallax container just like the Step 2.
$('.parallax').easyParallax({ speed: 6, effect: 'scroll', // or 'fixed' position: 'default', text: false, imageposition: 'center', zindex: '-1' });
Change log:
2016-11-21
- add position absoulte to fixed scroll effect
This awesome jQuery plugin is developed by RobertKatke. For more Advanced Usages, please check the demo page or visit the official website.