 |
| Scrolling Parallax Effects Animations In jQuery Plugin |
A feature-rich yet easy-to-implement jQuery animation plugin that applies a subtle parallax scrolling effect to background images and animates parallax container's child elements when scrolling down the page.
How to use it:
1. Load the required JavaScript and CSS files in the document.
<link href="/path/to/jquery.parallax.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.parallax.js"></script>
2. Add a background image to your parallax container using the data-bg attribute:
<div data-bg="bg.jpg"> ... </div>
3. Customize the speed rate. Default: 0.3.
<div data-bg="bg.jpg"
data-rate="0.5">
...
</div>
4. Apply a scroll-triggered reveal animation to child elements using the data-effect attributes. All possible animation types:
- slide-up
- slide-down
- slide-right
- slide-left
- flip-x
- flip-y
- zoom
<div data-bg="bg.jpg"
data-rate="0.5"
data-effect="flip-x">
<div class="list_item">
...
</div>
<div class="list_item">
...
</div>
<div class="list_item">
...
</div>
</div>
5. Initialize the plugin and done.
$('body').parallax();
6. Apply a custom reveal animation to your elements.
<div data-bg="bg.jpg"
data-rate="0.5"
data-func="custom_show">
...
</div>
6. Apply a custom reveal animation to your elements.
function custom_show(obj, mode) {
obj.children().addClass('animation animation_'+mode);
}
Live Demo
See the Pen Scrolling Parallax Effects Animations In jQuery Plugin by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- jquery.parallax-main.zip
- Size :
- 935.81KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT