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

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

skroll是一款页面滚动时触发元素动画效果的jQuery插件。skroll插件支持17+动画效果,可以在页面滚动时为任意DOM元素提供这些动画效果。

使用方法
在页面中引入jquery和skroll.min.js文件。

1
2
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skroll.min.js"></script>

HTML结构
例如要为一个

元素添加动画效果。

1
<div class="box">Animation</div>

初始化插件
接着使用下面的js代码来初始化该插件。

1
2
3
4
5
6
7
new Skroll()
  .add(".element",{
    delay:50,
    duration:500,
    animation:"zoomIn"
  })
  .init();

如果要支持移动设备,可以添加 mobile:true。

1
2
3
new Skroll({
  mobile:true
})

配置参数
skroll.js插件可用的配置参数有:

1
2
3
4
5
6
7
8
9
10
11
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
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论