Based on the jQuery Page scrolling element, the animation effect plug-in is triggered when entering the view.
Jquery-aniview is a very practical jQuery plug-in that takes effect when Page scrolling elements enter the view. The plug-in is based on animate.css. you can use all the animation transition effects in animate.css. The plug-in checks whether the specified element is in the viewport. When the element enters the viewport, the specified animation effect is executed.
Download Online Preview source code
UsageUse the jquery-aniviewplug-in Plug-in to import the files animate.css, jQuery, and jquery. aniview. min. js.
<link type="text/css" rel="stylesheet" href="animate.css"> <script src="js/jquery.min.js" type="text/javascript"></script><script src="jquery.aniview.min.js" type="text/javascript"></script>HTML Structure
You can use one<div>As a package element of an animation element. Set classaniview,av-animationClass name used to set the animation transition effect of animate.css:
<div class="aniview" av-animation="slideInRight"></div>
An example of a typical page is as follows:
<!DOCTYPE html>Initialize the plug-inAfter the DOM element on the page is loaded, you can initialize the plug-in using the following method.
$('.aniview').AniView();Or set some configuration parameters during initialization:
var options = { animateThreshold: 100, scrollPollInterval: 50}$('.aniview').AniView(options);Configuration parameters
| Parameters | Type | Description | Default Value |
| AnimateThreshold | Int | A positive value indicates that the animation sequence is triggered only when the element enters the specified pixel value in the view. A negative value indicates the number of pixels before the element enters the view. | 0 |
| ScrollPollInterval | Int | Test the frequency of user scrolling. Unit: milliseconds. This is an extension of jQuery's built-in "scroll" event. | 20 |
Note: any element that is in the viewport when the page is loaded will immediately trigger the animation sequence.
Via: http://www.w2bc.com/article/jQuery-plugin-with-animate
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
