页面滚动时，动态添加css动画

最新推荐文章于 2024-10-10 23:52:19 发布

死垃圾

最新推荐文章于 2024-10-10 23:52:19 发布

阅读量4.6k

点赞数

文章标签： css3 动画 web前端动态添加动画

本文链接：https://blog.csdn.net/sszcome/article/details/65633184

版权

在别人的网站中，看到页面滚动到某一位置时，该位置的元素通过各种炫酷的动画展示出来。不知道他们是怎么做的，我根据自己的理解做了一个demo。原理很简单，用CSS3预先定义元素的动画效果，先不要添加到元素上。监听window.onscroll的事件，获取页面滚动的高度，当这个元素显示出来时，动态添加该元素的动画效果。（有两种方法，1、通过style.cssText写入样式；2、通过className添加类）。话不多说，直接上代码。

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>动态CSS3动画</title>  
<style>  
* {margin:0; border:0; padding:0;}  
body {width:100%; height:2000px;}  
#div1 {
	position:relative;
	top: 1000px;
	display: flex;
	overflow: hidden;
}  

#div2 {
	position:relative;
	top: 1800px;
	display: flex;
	overflow: hidden;
}

#div1 .img,#div2 .img{
	position: relative;
	display: inline-block;
	flex: 1;
	height: 200px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}

#div1 .img1{
	background-image: url('img/sbg1.jpg');
	/* 动画名称 动画时长 动画循环次数*/
	/* animation: slideLeft 1s 1; */

}
#div1 .img2{
	background-image: url('img/sbg2.jpg');
	/* animation: slideBottom 1s 1; */
}
#div1 .img3{
	background-image: url('img/sbg3.jpg');
	/* animation: slideTop 1s 1; */
}
#div1 .img4{
	background-image: url('img/sbg4.jpg');
	/* animation: slideRight 1s 1; */
}

@keyframes slideRight{
	from{
		right: -200px;
	}
	to{
		right: 0px;
	}
}

@keyframes slideTop{
	from{
		top: -200px;
	}
	to{
		top: 0px;
	}
}
  
@keyframes slideBottom{
	from{
		bottom: -200px;
	}
	to{
		bottom: 0px;
	}
}

@keyframes slideLeft{
	from{
		left: -200px;
	}
	to{
		left: 0px;
	}
}

#div2 .img1{
	background-image: url('img/sbg1.jpg');
	/* 动画名称 动画时长 动画循环次数*/
	/* animation: zoomIn 1s 1; */

}
#div2 .img2{
	background-image: url('img/sbg2.jpg');
	/* animation: zoomOut 1s 1; */
}
#div2 .img3{
	background-image: url('img/sbg3.jpg');
	/* animation: rotate 1s 1; */
}
#div2 .img4{
	background-image: url('img/sbg4.jpg');
	/* animation: rotate2 1s 1; */
}

@keyframes zoomIn{
	from{
		transform: scale(0.1);
	}
	to{
		transform: none;
	}
}

@keyframes zoomOut{
	from{
		transform: scale(2);
	}
	to{
		transform: none;
	}
}

@keyframes rotate{
	from{
		transform: rotate(360deg) scale(0.1);
	}
	to{
		transform: none;
	}
}

@keyframes rotate2{
	from{
		transform: rotate(-360deg) scale(2);
	}
	to{
		transform: none;
	}
}
.ani1{
	animation: zoomIn 1s 1; 
}

.ani2{
	animation: zoomOut 1s 1; 
}

.ani3{
	animation: rotate 1s 1; 
}

.ani4{
	animation: rotate2 1s 1; 
}
</style>  
<script>  
window.onload = function (){
		//两种方法：1、通过style.cssText写入样式；2、通过className添加类。  
		// document.getElementById("div1").style.cssText = "animation: slideLeft 1s 1; "  
		// document.getElementById("div1").className = "ani";  
	window.onscroll = function (){  
		var clienth = document.documentElement.clientHeight;  //屏幕高度
		var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滚动条滚动高度
		var div1 = document.getElementById('div1');
		var div2 = document.getElementById('div2');
		if (scrollt+clienth>=1000) {
			div1.getElementsByClassName('img1')[0].style.cssText = 'animation: slideLeft 1s 1';
			div1.getElementsByClassName('img2')[0].style.cssText = 'animation: slideBottom 1s 1';
			div1.getElementsByClassName('img3')[0].style.cssText = 'animation: slideTop 1s 1';
			div1.getElementsByClassName('img4')[0].style.cssText = 'animation: slideRight 1s 1';
		}
		console.log(scrollt+clienth)
		if (scrollt+clienth>=2000) {
			for (var i = 1; i <= 4; i++) {
				div2.getElementsByClassName('img'+i)[0].className = 'img img'+i+' ani'+i;
			}
		}
	}  
}  
</script>  
</head>  
  
  
<body>  
	<div id="div1">
		<div class="img img1"></div>
		<div class="img img2"></div>
		<div class="img img3"></div>
		<div class="img img4"></div>
	</div>   

	<div id="div2">
		<div class="img img1"></div>
		<div class="img img2"></div>
		<div class="img img3"></div>
		<div class="img img4"></div>
	</div>  
</body>  
</html>

图片资源就不上传了，随便找几张图片就好了。比较懒，没有添加浏览器的私有前缀，自行添加。