视口动画Animate.css和 jquery-aniview详细使用

Animate.css和 jquery-aniview详细使用

今天同学给我发了一个网站，我看着特别唯美，动画做的很舒服 ：https://www.yjpark.work/explorations

他想让我去做一做，但是我在做的过程中遇到了不少问题。就去csdn搜，偶然间发现这个页面用的就是Animate.css和 jquery-aniview动画库。在用这两个的过程中也是遇到了不少问题。下面总结一下

注！：aniview主要是针对于元素进入视口（屏幕）时候的动画

第一步

要实现 jQuery AniView示例（http://jjcosgrove.github.io/jquery-aniview/）中的代码，要知道这个东西是基于什么的

1. jQuery
2. Animate.css
3. jquery-aniview

是由这三部分组成的

第二步

分别下载这三个

（建议使用npm 或 yarn 方式，cdn有时候网站会打不开）

npm i
//jquery安装
$ npm install jquery

//Animate.css安装
$ npm install animate.css --save

//jQuery AniView安装
$ npm install jquery-aniview

在自己项目中引入

第三步

使用

具体使用哪个类型的动画可以去 demo 网站上 f12 查看元素的data-av-animation值

html：

<p class="aniview-v3" data-av-animation="slideInRight">
    This is my awesome animated element using v3!
</p>
<p class="aniview-v4" data-av-animation="animate__jackInTheBox">
    This is my awesome animated element using v4!
</p>

注意后面的 data-av-animation属性值，根据animate版本不同有不同写法

jquery部分：

$(document).ready(function(){
           $('.aniview-v3').AniView(); 	//初始化，默认v3版本的 使用 animateClass:‘animated’
           $('.aniview-v4').AniView({		//初始化，声明是v4版本的 使用 animateClass: 'animate__animated'
               animateClass: 'animate__animated'
           });
       });

//初始化时还可以这样写
var options = {
   animateClass: 'animated',
   animateThreshold: 100,
   scrollPollInterval: 50
}
$('.aniview').AniView(options);

Option	Type	Description	Default
animateClass	string	the animate.css class to use: ‘animated’ enables v3.x support and ‘animate__animated’ to enable v4.x support	animated
animateThreshold（阈值）	int	+ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view.	0
scrollPollInterval	int	The frequency at which user scrolling is ‘polled’ i.e. tested. This is in milliseconds (ms) and is an extension to jQuery’s in-built ‘scroll’ event/handler.	20

解释一下 animateClass：这个的用法需要考虑自己引得是 v3版本的animate.css 还是v4版本的

animateThreshold：简单的的说，值是正的，就当元素进入视口后再触发；值是负的，就当元素进入视口前触发。

注：当用户加载页面时，任何已经在视口中的元素都将立即触发它的动画（如果已设置）。 换句话说，在这些元素上启动动画之前，它不会等待用户开始滚动。