
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.
See also:
How to use it:
1. Load the required animate.css in the head section of the document.
<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
<script src="//code.jquery.com/jquery-VERSION.min.js"></script> <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.
<h1 class="aniview" data-av-animation="bounce">jQuery Aniview Plugin Demo</h1>
4. Enable the plugin with default options.
var options = { // delay the animation sequence until '100' pixels have come into view animateThreshold: 100, // The frequency of which the user scrolling is 'tested'. scrollPollInterval: 20 } $('.aniview').AniView(options);
5. Enable the plugin with default options.
var options = { // delay the animation sequence until '100' pixels have come into view animateThreshold: 100, // The frequency of which the user scrolling is 'tested'. scrollPollInterval: 20 } $('.aniview').AniView(options);
Changelog:
2019-05-15
- Refactor/tidy up of scrolled() plugin and vieweport checking logic
2016-01-08
- fixed anonymous function
This awesome jQuery plugin is developed by jjcosgrove. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 15.05.2019
- Source