jquery插件页面滚动元素进入视口触发动画jquery-aniview

2019独角兽企业重金招聘Python工程师标准>>>

animate.css + jquery-aniview

Animate.css

Animate.css是一个跨浏览器的css3动画库，兼容性很好。官网：https://daneden.github.io/animate.css/。

1 首先引入animate.css文件

•  

2 给元素加上指定给的动画样式名

•  

这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

3 可以通过JS给添加类，实现动画效果

 

jquery-aniview

下载地址：http://jjcosgrove.github.io/jquery-aniview/

jquery-aniview是一款非常实用的页面滚动元素进入视口发生动画特效jQuery插件。该插件基于animate.css，你可以使用animate.css中所有的动画过渡效果。该插件会检测指定元素是否进入视口，在元素进入视口时则执行指定的动画效果。

1 引入文件：

2 为html元素设置aniview属性

3 在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件

$(‘.aniview‘).AniView();              

•  

4 在初始化的时候设置一些配置参数：

var options = {
    animateThreshold: 100,
    scrollPollInterval: 50
}
$(‘.aniview‘).AniView(options);  

• animateThreshold正数值表示元素进入视口指定的像素值之后才会触发动画序列，负数值表示在元素进入视口之前多少像素就触发动画序列
• scrollPollInterval int 测试用户滚动的频率，单位毫秒，这是jQuery内置的”scroll”事件的延伸

注意：任何在页面加载时就处于视口当中的元素会立刻被触发动画序列。

6 也可以通过CSS控制动画的效果：

//动画显示速度
.fast {
  animation-duration: 1s;
  animation-delay: 0s;
}

.slow {
  animation-duration: 2s;
  animation-delay: 0.5s;
}

.reallyslow {
  animation-duration: 3s;
  animation-delay: 1s;
}

转载于:https://my.oschina.net/parchments/blog/1585472