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,  // 监听容器 默认windowdesktop: 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 onloadviewFactor: 0.0, // 元素进入多少算他进图可视区 0-1viewOffset: {  // 计算元素可见性时，展开/收缩视口的活动边界。top: 0,right: 0,bottom: 0,left: 0,},afterReset: function (el) {}, // reset 后的回调afterReveal: function (el) {}, // reval 后的回调beforeReset: function (el) {}, // reset 前的回调beforeReveal: function (el) {}, // reval 前的回调
}

个人理解，仅供参考

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！