This time I will share jQuery Plugin and tutorial about Animate Elements On Scroll Using jQuery and Animate.css – Aniview, hope it will help you in programming stack.
Aniview is a lightweight jQuery plugin which detects the scroll event and triggers Animate.css powered CSS3 animations when elements become visible in the viewport.
How to use it:
1. Load the required animate.css in the head section of the document.
1 |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/VERSION/animate.min.css"> |
2. Load jQuery library and the jQuery aniview plugin at the bottom of the document
1 |
<script src="//code.jquery.com/jquery-VERSION.min.js"></script> |
2 |
<script src="jquery.aniview.js"></script> |
3. Add the CSS style ‘aniview’ to the elements and use data-av-animation attribute to specify the Animate.css’s CSS3 animation you want to use.
1 |
<h1 class="aniview" data-av-animation="bounce">jQuery Aniview Plugin Demo</h1> |
4. Enable the plugin with default options.
9 |
$('.aniview').AniView(options); |
5. Enable the plugin with default options.
9 |
$('.aniview').AniView(options); |
Changelog:
2019-05-15
- Refactor/tidy up of scrolled() plugin and vieweport checking logic
2016-01-08
This awesome jQuery plugin is developed by jjcosgrove. For more Advanced Usages, please check the demo page or visit the official website.
