This time I will share jQuery Plugin and tutorial about jQuery Plugin To Animate Elements While Scrolling – Animate Scroll, hope it will help you in programming stack.
| File Size: | 13.1 KB |
|---|---|
| Views Total: | 4559 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another viewport triggered animation plugin that let you apply cool modern Greensock powered animations to Html elements on view while scrolling.
How to use it:
1. Load jQuery library and other required resources in the document.
1 |
<script src="js/jquery.min.js"></script> |
2 |
<script src="js/vendor/TweenMax.min.js"></script> |
3 |
<script src="js/vendor/EasePack.min.js"></script> |
2. Load the jQuery Animate Scroll plugin after jQuery library.
1 |
<script src="js/animate-scroll.js"></script> |
3. Add viewport triggered animations to elements using data-animate-scroll attribute as follow.
1 |
<div data-animate-scroll='{ |
2 |
"y":"50", |
3 |
"duration": |
4 |
"1.75", |
5 |
"scaleX": "0", |
6 |
"scaleY": "0" |
7 |
}'> |
8 |
Element |
9 |
</div> |
4. All the animation options.
01 |
// Parent transform perspective |
02 |
transformPerspective: 1000, |
03 |
04 |
// Lazy load images (experimental) |
05 |
lazyLoad: false, |
06 |
07 |
// Animate elements outside of viewport? |
08 |
reverse: true, |
09 |
10 |
// Animate elements outside of viewport? |
11 |
animateAll: false, |
12 |
13 |
// Transform origin X/Y position |
14 |
transformOrigin: '50% 50%', |
15 |
16 |
// Horizontal offset in px |
17 |
x: 0, |
18 |
19 |
// Vertical offset in px |
20 |
y: 0, |
21 |
22 |
// Scale X position |
23 |
scaleX: 1, |
24 |
25 |
// Scale Y position |
26 |
scaleY:, |
27 |
28 |
// Rotation in degrees |
29 |
rotation: 0, |
30 |
31 |
// Rotation X position |
32 |
rotationX: 0, |
33 |
34 |
// Rotation X position |
35 |
rotationY: 0, |
36 |
37 |
// Opacity from 0.0-1 |
38 |
alpha: 0.9, |
39 |
40 |
// <a href="https://www.jqueryscript.net/animation/">Animation</a> delay |
41 |
delay: 0, |
42 |
43 |
// Z position |
44 |
z: 0.1, |
45 |
46 |
// Force <a href="https://www.jqueryscript.net/tags.php?/3D/">3D</a> hardware |
47 |
force3D: true, |
48 |
49 |
// Animation easing type |
50 |
easingType: 'Back.easeInOut', |
51 |
52 |
// Animation diration in seconds |
53 |
duration: 0.3 |
5. Initialize the plugin.
1 |
$(document).animateScroll(); |
6. Events.
1 |
// play |
2 |
$('.my-animated-element').trigger('play'); |
3 |
4 |
// reverse |
5 |
$('.my-animated-element').trigger('reverse'); |
6 |
7 |
// check |
8 |
$('.my-animated-element').trigger('check'); |
Change log:
2016-03-13
- added disable reverse animation toggle
This awesome jQuery plugin is developed by mpalpha. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
