首页 > 其他分享 >页面滚动 动画

页面滚动 动画

时间:2022-12-23 15:11:50浏览次数:45  
标签:function el 滚动 动画 reset 回调 true 页面

 

VueScrollReveal

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 onl oad
    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 前的回调

 

标签:function,el,滚动,动画,reset,回调,true,页面
From: https://www.cnblogs.com/peipeiyu/p/17000711.html

相关文章