游鱼的博客

ScrollReveal

window.sr = ScrollReveal({
    reset: true
});
sr.reveal('.foo', {
    duration: 10000,                          // 持续时间
    origin: 'left',                           // 开始的方向 (偏移 top:自上而下, bottom:自下而上, left:自左往右, right:自右往左)
    distance: '0px',                          // 执行距离
    opacity: 0,                               // 初始透明度  (过度到1的效果) 淡入淡出
    delay: 0.2,                               // 延迟
    interval: 0,                              // 执行间隔（时间）
    easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)', // 动画效果 和 动画曲线 属性{ease, ease-in, ease-in-out, ease-out, step-start, step-end, steps(), cubic-bezier()}
    desktop: true,                            // 是否在电脑上面执行
    mobile: true,                             // 是否在手机上面执行
    reset: false,                             // 是否重复执行（滚动鼠标时，动画开关(默认是false没有打开鼠标滚动的动画开关)）
    rotate: {x: 0, y: 0, z: 0},               // 初始角度 (过度到0的效果) 翻转特效
    cleanup: false,                           // 暂时不知道是什么东西
    container: document.documentElement,      // 执行容器（后跟元素，填写后只有容器内的元素执行动画）
    useDelay: 'always',                       // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    viewFactor: 0.0,                          // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）
    viewOffset: {                             // 视图偏移（把视图抽象成元素移动）
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },

    beforeReveal: function (domEl) {  // 当动画开始之前会被触发
        console.log('动画执行了');
    },

    beforeReset: function (domEl) { // 鼠标滚轮滚动之前会被触发
        console.log('滚轮开始---');
    },

    afterReveal: function (domEl) { // 当动画开始之后会被触发
        console.log('动画结束了');
    },

    afterReset: function (domEl) { // 鼠标滚轮滚动之后会被触发
        console.log('滚轮结束了');
    }
});