当先锋百科网

首页 1 2 3 4 5 6 7

非常简单的页面滚动动画 

<!DOCTYPE html>
<html lang="zh-CN">
<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>页面滚动动画</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	li{
		list-style: none;
	}
	ul{
		width: 100%;
		padding: 20px;
		overflow-x: hidden;
	}
	.box{
		background-color: rgb(181, 111, 246);
		border-radius: 8px;
		box-shadow: 0px 1px 0px #ccc;
		margin-bottom: 20px;
		width: 100%;
		height: 300px;
		transform: translateX(200%);
		transition: transform 0.4s ease;
	}
	.box:nth-of-type(even){
		transform: translateX(-200%);
	}
	.box:last-child{
		margin-bottom: 0px;
	}
	.box.show{
		transform: translateX(0);
	}
	.content{
		overflow: hidden;
	}

</style>
<body>
	<div class="content">
		<ul>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
		</ul>
	</div>
</body>
<script>
	const boxs = document.querySelectorAll('.box');
	window.addEventListener('scroll', function () {
		checkBoxs()
	})
	checkBoxs()
	function checkBoxs(){
		const trggerHeight = window.innerHeight / 5 * 4
		boxs.forEach(el => {
			const boxTop = el.getBoundingClientRect().top
			console.log(boxTop,trggerHeight,boxTop<trggerHeight);
			boxTop<trggerHeight ? el.classList.add('show'):el.classList.remove('show')
		});
	}
</script>
</html>