17+jQuery页面滚动动画特效插件-鸾鸟资源网

17+jQuery页面滚动动画特效插件

发布2023-08-04 浏览895次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！。

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>

HTML

例如要为一个<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插件支持的动画有：