当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skroll.min.js"></script>
```
#####  HTML
例如要为一个div元素添加动画效果。

```html
<div class="box">Animation</div>
```
#####  初始化插件 
接着使用下面的js代码来初始化该插件。

```html
new Skroll()
  .add(".element",{
    delay:50,
    duration:500,
    animation:"zoomIn"
  })
  .init();
```
如果要支持移动设备，可以添加 mobile:true。

```html
new Skroll({
  mobile:true
})
```
##### 配置参数 
skroll.js插件可用的配置参数有：

```html
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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果