通过js滚轮滚动时调用动画_jquery-scrolla是一款页面滚动触发动画插件

jquery-scrolla是一款将CSS3动画与页面滚动相结合的插件,当元素进入视口时触发指定动画。结合animate.css,它可以执行各种CSS3动画。在HTML中为动画元素添加animate类和data-*属性,然后在DOM加载后调用.scrolla()方法进行初始化。配置参数包括移动端支持和动画执行次数。
摘要由CSDN通过智能技术生成

jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。

简要教程

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

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

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

要动画的div元素

data-animate: 动画类型

data-duration: 动画持续时间

data-delay: 动画延迟时间

初始化插件

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

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

配置参数

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

$('.animate').scrolla({

mobile: false, // 是否允许在移动设备上执行滚动动画。

once: false // 设置为true时,滚动动画只执行一次。

});

它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值