动效，类似wow.js-Html页面动画效果插件scrollReveal.js使用教程

### 前言
> 和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。

虽然 scrollReveal.js 不依赖 animate.css，但它的动画也是用 CSS3 创建的，所以它不支持 IE10 以下的浏览器。

下载地址：http://micuer.com/data/soft/scrollReveal.js

###  使用方法

1：引用
```
<script src="js/scrollReveal.js"></script>
```

2:html
```
<div data-scroll-reveal>dowebok.com</div>
```
```
div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
<div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>
```

3:js激活页面动画
```
window.scrollReveal = new scrollReveal();
//或者，elem 为动画元素的任何级别的父元素
window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});
```

```
div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
<div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
<div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
<div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>
```

### 高级用法

```
var config = {
    after: '0s',
    enter: 'bottom',
    move: '24px',
    over: '0.66s',
    easing: 'ease-in-out',
    viewportFactor: 0.33,
    reset: false,
    init: true
};
window.scrollReveal = new scrollReveal(config);
```

更多可参考：https://www.dowebok.com/134.html

注:原创不易,转载请注明出处( https://micuu.com/new/852.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

动效，类似wow.js-Html页面动画效果插件scrollReveal.js使用教程

留言反馈