skroll 是一款页面滚动时触发元素动画效果的 jQuery 插件。skroll 插件支持 17+动画效果,可以在页面滚动时为任意 DOM 元素提供这些动画效果。
在页面中引入 jquery 和 skroll.min.js 文件。
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skroll.min.js"></script>
例如要为一个<div>元素添加动画效果。
<div class="box">Animation</div>
接着使用下面的 js 代码来初始化该插件。
new Skroll()
.add(".element",{
delay:50,
duration:500,
animation:"zoomIn"
})
.init();
如果要支持移动设备,可以添加 mobile:true。
new Skroll({
mobile:true
})
skroll.js 插件可用的配置参数有:
triggerTop:.2, // Any value between 0 and 1
triggerBottom:.8, // Any value between 0 and 1
delay:0, // Integer, delay in milliseconds
duration:500, // Integer, duration in milliseconds
animation:"zoomIn", // string or object
easing:"ease", // string
wait:0, // integer, wait in milliseconds
repeat:false, // boolean
onEnter:false, // function or false to denote no action
onLeave:false // function or false to denote no action
skroll.js 插件支持的动画有:
zoomIn
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInDown
slideInLeft
slideInLeftBig
slideInRight
slideInRightBig
flipInX
flipInY
rotateRightIn
rotateLeftIn
growInLeft
growInRigh
Github 网址:https://github.com/akzhy/skroll
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!