html中使用scrollReveal实现页面滚动时动态效果
首先下载 scrollReveal.js 文件并引入
链接:https://pan.baidu.com/s/12MsskovbVZ3EAMKcugu0zw
提取码:v18x
简单实例demon
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/scrollReveal.js"></script> <style> div { width: 100px; height: 50px; background-color: blue; margin-top: 200px; } </style> </head> <body> <div data-scroll-reveal="enter top and move 100px over 0.3s"></div> <div data-scroll-reveal="enter bottom and move 100px over 0.3s"></div> <div data-scroll-reveal="enter left and move 100px over 0.3s"></div> <div data-scroll-reveal="enter right and move 100px over 0.3s"></div> <div data-scroll-reveal="enter top and move 100px over 0.3s"></div> <div data-scroll-reveal="enter bottom and move 100px over 0.3s"></div> <div data-scroll-reveal="enter left and move 100px over 0.3s"></div> </body> <script> (function($) { 'use strict'; window.scrollReveal = new scrollReveal({ reset: true, // move: '30px' }); })(); </script> </html>
data-scroll-reveal属性
上面说了可以自定义 data-scroll-reveal 属性,下面来看看该属性的关键词和值(可选)。
enter
- 说明: 动画起始方向
- 值: top | right | bottom | left
move
- 说明: 动画执行距离
- 值: 数字,以 px 为单位
over
- 说明: 动画持续时间
- 值: 数字,以秒为单位
after/wait
- 说明: 动画延迟时间
- 值: 数字,以秒为单位
想让哪个模块动就添加 data-scroll-reveal属性 就可以
高级用法
自定义默认值
可以更改 scrollReveal.js 的默认配置,如:
var config = { after: '0s', enter: 'bottom', move: '24px', over: '0.66s', easing: 'ease-in-out', viewportFactor: 0.33, reset: false, init: true }; window.scrollReveal = new scrollReveal(config);
动态HTML
scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素,并进行初始化,所以对于动态加载的元素,可以这样操作:
var config = { enter: 'bottom', move: '40px', over: '0.16s', reset: true, init: false }; window.scrollReveal = new scrollReveal(config); var data = {newElementHtml: '<div data-scroll-reveal>dowebok.com</div>'}; var container = document.getElementById('#container'); container.innerHTML(data.newElementHTML); scrollReveal.init();