scrollReval

ScrollReveal

• scrollReval是一个遵循GPL开源协议的js库 ScrollReveal官方文档
• 其主要功能就是监听滚动条实现滚动动画
• 主要方法如下

1. reval()

// 其接受四种参数css选择器、DOM节点(集合)或者是节点数组
var node = document.querySelector('#cake');
var nodeList = document.querySelectorAll('.cookies');
var nodeArray = [
    document.querySelector('#pie'),
    document.querySelector('#spoon'),
    document.querySelector('#ice-cream')
];

ScrollReveal().reveal(node);
ScrollReveal().reveal(nodeList);
ScrollReveal().reveal(nodeArray);

2. clean

// Reverses the effects of a reveal() call, removing the styles and event listeners from target element(s).
同样也是四种参数
ScrollReveal().clean('.items');

• 默认配置

{
    delay: 0,  // 延迟
    distance: '0px', // 相对于原出现位置的距离
    duration: 600, // 动画多长时间完成
    easing: 'cubic-bezier(0.5, 0, 0, 1)', // 动画速度曲线
    interval: 0, // 每一次reaval之间的间隔
    opacity: 0, // 原始透明度
    origin: 'bottom', // 从哪个方向出现
    rotate: {   // 出现时旋转角度
        x: 0,
        y: 0,
        z: 0,
    },
    scale: 1,  // 缩放
    cleanup: false,  // 是否清空
    container: document.documentElement,  // 监听容器 默认window
    desktop: true,  // pc生效？
    mobile: true,  // mobile 生效?
    reset: false,  // enables/disables elements returning to their initialized position when they leave the viewport. When true elements reveal each time they enter the viewport instead of once.
    useDelay: 'always', // delay 触发次数 always once onload
    viewFactor: 0.0, // 元素进入多少算他进图可视区 0-1
    viewOffset: {  // 计算元素可见性时，展开/收缩视口的活动边界。
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    },
    afterReset: function (el) {}, // reset 后的回调
    afterReveal: function (el) {}, // reval 后的回调
    beforeReset: function (el) {}, // reset 前的回调
    beforeReveal: function (el) {}, // reval 前的回调
}

个人理解，仅供参考