人靠衣装,机靠壳装

17款jQuery页面滚动动画特效skrool插件

2018-11-24 09:24 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

17款jQuery页面滚动动画特效skrool插件.png


skroll页面滚动时触发元素动画效果的jQuery插件,支持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插件支持的动画有:

  • zoomIn

  • fadeInLeft

  • fadeInLeftBig

  • fadeInRight

  • fadeInRightBig

  • fadeInUp

  • fadeInDown

  • slideInLeft

  • slideInLeftBig

  • slideInRight

  • slideInRightBig

  • flipInX

  • flipInY

  • rotateRightIn

  • rotateLeftIn

  • growInLeft

  • growInRigh

skroll.js插件的github网址为:https://github.com/akzhy/skroll

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 相关链接

在线演示

0
猜你喜欢
更多发现
子导航JS代码