jquery页面滚动触发动画插件

当前位置:主页 > jQuery库 > 布局和界面 > jquery页面滚动触发动画插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
jquery页面滚动触发动画插件
分享:

    插件介绍

    jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-27
    阅读:
简要教程

jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。

使用方法

在页面中引入jquery和scrolla.jquery.min.js以及animate.css文件。

<link rel="stylesheet" href="animate.min.css">
<script type="text/javascript" src="path/to/js/jquery.min.js"></script>
<script type="text/javascript" src="path/to/js/scrolla.jquery.min.js"></script>
                
HTML结构

你需要为执行动画的dom元素添加animateclass类,并通过data-*属性来指定元素的动画类型,动画持续时间,动画延迟时间和偏移等属性。例如:

<div class="animate" data-animate="rubberBand" 
             data-duration="1.0s" 
             data-delay="0.1s" 
             data-iteration="1">
要动画的div元素
</div>     
                
初始化插件

在页面DOM元素加载完毕之后,可以通过scrolla()方法来初始化jquery-scrolla插件。

$('.animate').scrolla();
                

配置参数

jquery-scrolla插件的可用配置参数如下:

$('.animate').scrolla({
    mobile: false, // disable animation on mobiles 
    once: false // only once animation play on scroll
});               
                
  • mobile:是否允许在移动设备上执行滚动动画。
  • once:设置为true时,滚动动画只执行一次。

jquery-scrolla页面滚动动画插件的github地址为:https://github.com/maximzhurkin/jquery-scrolla

网友评论