ScrollReveval.js 视差滚动的探索

参数	描述
origin	起始位置
distance	距离
duration	动画时间
delay	动画延迟时间
rotate	旋转角度
opacity	透明度
scale	缩放比例
easing	动画速度曲线
container	外层
mobile	支援行动装置
reset	每次都启动动画
useDelay	延迟动画次数
viewFactor	当该物件在可视范围内，则显示此物件(0.2表示可视范围20%)
viewOffset	当外层有设定间隔造成偏移，则请设定在此维持精准度
beforeReveal ()	当启动前，则执行此函式
beforeReset ()	当重启前，则执行此函式
afterReveal ()	当启动后，则执行此函式
afterReset ()	当重启后，则执行此函式

Reveal

添加特效

参数范围

function (target,option)
target : string/node/ nodeList/Array  
 option: object   

样例

ScrollReveal().reveal('.item', { duration: 500 });
# 科普

> 用于元素进入/离开视口时轻松对动画处理

## clean

> 清除掉`reveal()` 的样式和事件

​```js
function(target)
范围
string    
DOM node   
nodeList 
Array

var node = document.querySelector('#cake');
var nodeList = document.querySelectorAll('.cookies');
var nodeArray = [
    document.querySelector('#pie'),
    document.querySelector('#spoon'),
    document.querySelector('#ice-cream')
];
样例
ScrollReveal().clean('.items');

destroy

删除所有的reveal() 的样式和事件

ScrollReveal().destroy();

## 第二个参数

## delay 

延迟(ms) number

​```js
ScrollReveal().reveal('.item', { delay:500 });

origin

'top'
'right'
'bottom'
'left'

原始位置
    
ScrollReveal().reveal('.ddd',{ origin: 'right',distance: '100px' })

distance

string

移动距离

'px'  'em'  '%'
ScrollReveal.reveal('.items', { distance: '50px' });

duration

number ms

持续时间

ScrollReveal().reveal('#example', { duration: 500 });

easing

速度函数

'ease'
'ease-in'
'ease-in-out'
'ease-out'
'step-start'
'step-end'
'steps()' 分几步 steps(3) 就是分3步
'cubic-bezier()'

cleanup

如果想sync() 多次调用,就设置{cleanup:true}

    ScrollReveal().reveal('.ddd',{ origin: 'right',distance: '100px',  cleanup: true})

后续还需要动画执行的话,就点击下
click

 add() {
    ScrollReveal().sync();
  }

container

可见性调用

string|node

默认是document的滚动条进行监控

{ container: document.documentElement }

但是如果我们有单独的侧边导航栏,你的大盒子必须有滚动条,通过大盒子对里面的小盒子进行特效

,但是当我们对里面的某个小盒子进行这样的操作的时候,就可以指定

See the Pen <a href='https://codepen.io/973782523/pen/vYGNPNQ'>vYGNPNQ</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

desktop

桌面浏览器开启禁用动画

ScrollReveal().reveal('.squares', { desktop: false });

mobile

移动浏览器 开启禁用动画

ScrollReveal().reveal('.squares', { mobile: false });

reset

简单理解就是就是不止调用一次

boolean

默认

{reset:false}

每次滚动到这个位置的时候都可以调用

 ScrollReveal().reveal('.flex .ddd',{ origin: 'right',distance: '100px',  container:'.flex',reset: true})

useDelay

何时分配给延迟options.deplay

默认

{ useDelay: 'always' }

'always'	延迟所有动画
'once'	Only delay the first time reveals occur.
'onload'	页面加载的时候触发

ScrollReveal().reveal('.widgets', {
    delay: 1000,
    reset: true,
    useDelay: 'once'
});

viewFactor

表示 某元素必须占比试图多少才显示

默认

{ viewFactor: 0 }
范围 0.0-1.0

这个意思就是该元素展示肉眼可见的视图50%,显示
ScrollReveal().reveal('.some', { viewFactor: 0.5 });

https://scrollrevealjs.org/api/view-offset.html 明天看

viewOffset

计算位置偏移的精准度

默认(number) px

{
    viewOffset: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    }
}

ScrollReveal().reveal('.widgets', {
    viewOffset: {
        top: 60
    }
});

就是我从距离高度为60px的位置移动过来
就是设置我没显示到显示到这个的距离
 ScrollReveal().reveal('.flex-box .bbb',
      {origin: 'left', distance: '200px', reset: true, container: '.flex-box',viewOffset:{
        left:100,
        }}
个人觉得这个位置跟原点的距离相互关联