javascript scrollReveal插件使用

最新推荐文章于 2024-06-29 11:36:40 发布

俞泰鑫

最新推荐文章于 2024-06-29 11:36:40 发布

阅读量622

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/god_yutaixin/article/details/103994057

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

scrollReveal插件用于加载页面的动画效果

<head>
	<style>
		.scroll{
			width:180px;
			height:50px;
			background-color:red;
			margin:5px;
			}
	</style>
	<!-- 第一步：导入scrollReveal插件 -->
	<script src="../static/js/scrollReveal.js"></script>
</head>
<body>
	<!-- 第二步：在标签中添加data-scroll-reveal属性 
	data-scroll-reveal="动画起始位置(top|right|bottom|left) 动画执行距离(px像素为单位) 动画持续时间(以秒为单位) 动画延迟时间(以秒为单位)"
	 -->
	<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>
	<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>
	<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>

	<script>
		//第三步：向window对象(就是浏览器)中添加scrollreveal对象
		window.scrollReveal = new scrollReveal({
			reset:true
			})
	</script>
</body>
</html>