标签：官方文档 电脑 ike asi cleanup eal 查看 OLE ubi
前面我去了解了元素距页面视图距离，想实现页面滚动是动画加载元素（https://www.cnblogs.com/chenghuayike/p/11970731.html）到处撞墙，心肥意冷啊┭┮﹏┭┮，猛然间发现了scrollReveal 插件，查看了官档后明白过来，这不就是我想实现的效果嘛，还是太过于萌新了。。。
好了，接下来我总结了一下 scrollReveal 插件的基本使用方法，加强记忆！！
scrollReveal 插件使用起来非常的简单，三部曲：
1.引入 scrollReveal ：
<script src="https://unpkg.com/scrollreveal" type="text/javascript" charset="utf-8"></script> // 或者下载到本地使用
2.js代码：
window.sr = ScrollReveal(); sr.reveal(‘.foo‘); // 这里的 .foo 为元素类名 引用与jquery语法相同
3.html代码：
<div id="containers">
<div class="foo"> Foo ??</div>
<div class="foo"> Foo1 </div>
<div class="foo"> Foo2 </div>
<div class="foo"> Foo3 </div>
</div>
<div class="foo"> Foo4 </div>
运行项目即可（是不是非常的简单？）
当然，这只是 scrollReveal 插件的最基本的用法，是固定的一种淡入效果，（却不是我想要的动画效果）接下来我们来看一看 scrollReveal 的属性：
以下是scrollReveal插件 官方文档 给出的属性（自己整理了一下）：
// 属性：（默认） delay: 0, // 延时时间 distance: ‘0px‘, // 执行距离 duration: 600, // 执行时长 easing: ‘cubic-bezier(0.5, 0, 0, 1)‘, // 执行速度 interval: 0, // 执行间隔（时间） opacity: 0, // 执行方式（透明度） origin: ‘bottom‘, // 执行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.） rotate: { // 执行方式（旋转） x: 0, // x y: 0, // y z: 0, // z }, scale: 1, // 执行方式（缩放） cleanup: false, // 暂时不知道是什么东西 container: document.documentElement, // 执行容器（后跟元素，填写后只有容器内的元素执行动画） desktop: true, // 是否在电脑上面执行 mobile: true, // 是否在手机上面执行 reset: false, // 是否重复执行（） useDelay: ‘always‘, // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行）） viewFactor: 0.0, // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画） viewOffset: { // 视图偏移（把视图抽象成元素移动） top: 0, right: 0, bottom: 0, left: 0, }, afterReset: function (el) {}, // 重置之后（视图内看不到元素之后，退场动画执行结束之后） afterReveal: function (el) {}, // 执行之后（动画已经执行完毕（已完成）） beforeReset: function (el) {}, // 重置之前（视图内看不到元素之后，退场动画执行结束之前） beforeReveal: function (el) {}, // 执行之前（动画开始执行（未完成时））
这次是不是一目了然（肯定会了解的深入一点了吧），接下来根据官方文档给出的使用方式，我们来试一试：
1.引入js 2.html代码 （这两步同上）
3.js代码：（除了使用原生动画属性外，还有两种使用方式）
第一种：
直接在 reveal 的时候，在后面参数内直接添加自己想要的某一些属性：
var containers = document.getElementById("containers") window.sr = ScrollReveal(); sr.reveal(‘.foo‘,{container:containers});
以上代码中 {container:containers} 表示只有在 containers 中的类名为“foo”的元素执行 scrollReveal 插件的动画效果，相当于确定某个盒子（containers）里面的元素执行scrollReveal
第二种：
我们可以先 var 一个 option 来写入要替换默认属性
var option = { delay: 0, distance: ‘140px‘, easing: ‘ease-in-out‘, origin: "bottom", interval: 300, afterReset: function(el) { console.log("重置之后") }, afterReveal: function(el) { console.log("执行之后") }, beforeReset: function(el) { console.log("重置之前") }, beforeReveal: function(el) { console.log("执行之前") }, reset: true, }
接下来：
sr.reveal(‘.foo‘,option);
相当于用以上option中的属性覆盖掉scrollReveal插件的默认属性，用来替换自己想要的效果，或者使用其中的回调函数等等
以上为我总结的 scrollReveal 插件的一些基本使用方法，相互学习，望大佬带带本萌新。
标签：官方文档 电脑 ike asi cleanup eal 查看 OLE ubi
原文地址：https://www.cnblogs.com/chenghuayike/p/12084960.html
