今天同学给我发了一个网站,我看着特别唯美,动画做的很舒服 :https://www.yjpark.work/explorations
他想让我去做一做,但是我在做的过程中遇到了不少问题。就去csdn搜,偶然间发现这个页面用的就是Animate.css和 jquery-aniview动画库。在用这两个的过程中也是遇到了不少问题。下面总结一下
注!:aniview主要是针对于元素进入视口(屏幕)时候的动画
要实现 jQuery AniView示例(http://jjcosgrove.github.io/jquery-aniview/)中的代码,要知道这个东西是基于什么的
- jQuery
- Animate.css
- 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:简单的的说,值是正的,就当元素进入视口后再触发;值是负的,就当元素进入视口前触发。
注:当用户加载页面时,任何已经在视口中的元素都将立即触发它的动画(如果已设置)。 换句话说,在这些元素上启动动画之前,它不会等待用户开始滚动。