This time I will share jQuery Plugin and tutorial about Animate Elements In Sequence – jQuery CSS3 Animation Queue, hope it will help you in programming stack.
CSS3 Animation Queue is a jQuery plugin that uses CSS3 animations to animate desired elements in sequence when they’re scrolled into view.
Installation:
2 |
$ npm install jquery-css3-animation-queue --save |
5 |
$ bower install jquery-css3-animation-queue --save |
How to use it:
1. Include a CSS3 animation library of your choice (for example animate.css) in the web page.
1 |
<link rel="stylesheet" href="animate.min.css"> |
2. The required CSS rule.
2 |
-webkit-animation: none !important; |
3 |
-o-animation: none !important; |
4 |
animation: none !important; |
3. Add the CSS class ‘standby’ and other animation classes to the target elements as follows:
1 |
<h2 class="animated standby slideInLeft">This comes in from the left.</h2> |
2 |
<h3 class="animated standby slideInRight">And then this comes in from the right.</h3> |
4. Include jQuery library and the jQuery CSS3 Animation Queue’s script jquery-css3-animation-queue.js at the bottom of the page. Done.
2 |
<script src="jquery-css3-animation-queue.js"></script> |
5. Specify the time to wait before triggering the CSS animations. Default: 300.
1 |
<h2 class="animated standby slideInLeft" data-delay="2000">This comes in from the left.</h2> |
2 |
<h3 class="animated standby slideInRight" data-delay="6000">And then this comes in from the right.</h3> |
6. Specify the distance from top of the page to trigger the CSS animations.
1 |
<h2 class="animated standby slideInLeft" data-offset="200">This comes in from the left.</h2> |
2 |
<h3 class="animated standby slideInRight" data-offset="600">And then this comes in from the right.</h3> |
Changelog:
v1.1.0 (2019-05-16)
- reduce default delay to 300ms
2018-12-18
- immediate animation to grab items from queue
2018-10-10
- add option to immediately trigger elements above fold
2018-08-04
- set left offset elements as priority when sorting
2018-06-07
2018-06-06
- v1.0.6: allow override of default settings
2018-05-31
- v1.0.5: inverted offset math fix
This awesome jQuery plugin is developed by Richard1320. For more Advanced Usages, please check the demo page or visit the official website.
