文本/链接

Skroll 页面滚动动画特效jQuery插件

阿里云

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

使用方法

在页面中引入 jquery 和 skroll.min.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="assets/js/jquery.min.js"></script>
  2. <script src="assets/js/skroll.min.js"></script>

HTML 代码

例如要为一个<div>元素添加动画效果。

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

初始化插件

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

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

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

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

配置参数

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

  1. triggerTop:.2,               // Any value between 0 and 1
  2. triggerBottom:.8,            // Any value between 0 and 1
  3. delay:0,                     // Integer, delay in milliseconds
  4. duration:500,                // Integer, duration in milliseconds
  5. animation:"zoomIn",          // string or object
  6. easing:"ease",               // string
  7. wait:0,                      //  integer, wait in milliseconds
  8. repeat:false,                // boolean
  9. onEnter:false,               // function or false to denote no action
  10. 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

Skroll 页面滚动动画特效 jQuery 插件

已有 722 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!