前段时间,做5G发布会专题活动,移动端应用scrolla做页面滚动加载动画,竞然不生效,花了好久才找出原因。原来我忘了修改js配置参数,把false改为true即可解决问题。
解决办法:
mobile: false, // 是否允许在移动设备上执行滚动动画,把false改为true。
---------------------------------------------------------------------------------------------------------
jquery-scrolla插件介绍
jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。
在页面中引入jquery和scrolla.jquery.min.js以及animate.css文件。
<link rel="stylesheet" href="style/animate.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolla.jquery.min.js"></script>
HTML结构
你需要为执行动画的dom元素添加 animate class类,并通过data-*属性来指定元素的动画类型,动画持续时间,动画延迟时间和偏移等属性。例如:
<div class="animate" data-animate="zoomIn" data-duration="1.0s" data-delay="0.1s" >
要动画的div元素
</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动画效果。