scrollReveal.js
农明辉
感觉和WOW.js有的一拼的js，好处是不用依赖其他css和jquery文件。
使用wow.js滚动时加载动画只能执行一次，而scrollReveal.js是可以多次的。
Demo：http://www.bright2017.top/test1/test1-31/
参考地址：https://www.jianshu.com/p/e72e3bd930a9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>scrollReveal.js</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<ul>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
<li class="test">滚动啦滚动啦滚动啦滚动啦滚动啦滚动啦</li>
</ul>
<script src="https://cdn.bootcss.com/scrollReveal.js/4.0.5/scrollreveal.js"></script>
<script type="text/javascript">
var config = {
after: '0s',
enter: 'bottom',
move: '24px',
over: '0.66s',
easing: 'ease-in-out',
viewportFactor: 0.33,
reset: true,
init: true,
// 回调函数
beforeReveal: function(domEl) {
console.log('动画执行了');
},
//鼠标滚轮滚动之前会被触发
beforeReset: function(domEl) {
console.log('滚轮开始---');
},
//动画开始之后会被触发
afterReveal: function(domEl) {
console.log('动画结束了');
},
//滚轮滚动之后会被触发
afterReset: function(domEl) {
console.log('滚轮结束了');
}
};
window.sr = ScrollReveal();
sr.reveal('.test', config);
</script>
</body>
</html>
类似资料：