scrollReveal.js

最新推荐文章于 2023-04-28 16:24:36 发布

Bright2017

最新推荐文章于 2023-04-28 16:24:36 发布

阅读量1.1k

点赞数 4

分类专栏：网页中用到过的效果 JavaScript

本文链接：https://blog.csdn.net/bright2017/article/details/85232177

版权

网页中用到过的效果同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

JavaScript

50 篇文章 1 订阅

订阅专栏

感觉和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>

webok.com/134.html

Bright2017

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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&lt;!DOCTYPE html&...
复制链接

扫一扫