html&css 简单的视觉滚动(练习项目)

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

前端案例专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML+CSS实战项目——视差滚动效果。通过使用HTML结构和CSS样式，结合JavaScript实现页面元素随滚动条移动而产生不同速度的变化，营造出三维的视觉体验。

在学了html+css之后，我们需要多多练习一些小项目，来巩固自己的学习成果。

下面是第一个html+css练习：

代码如下：

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<section>
		<img src="bg.jpg" id="bg">
        <img src="moon.png" id="moon">
        <img src="mountain.jpg" id="mountain">
        <img src="road.png" id="road">
        <h2 id="text">Moon Lig</h2>
	</section>
	<script type="text/javascript">
		let bg = document.getElementById("bg");
		let moon = document.getElementById("moon");
		let mountain = document.getElementById("mountain");
		let road = document.getElementById("road");
		let text = document.getElementById("text");

		window.addEventListener('scroll',function(){
			var value = window.scrollY;

			bg.style.top = value * 0.5 + 'px';
			moon.style.top = -value * 0.5 + 'px';
			mountain.style.top = -value * 0.15 + 'px';
			road.style.top = value * 0.15 + 'px';
			text.style.top = value * 1 + 'px';
		})
	</script>
	</body>
	</html>

接下来是CSS界面代码：

*
{
   margin: 0;
   padding: 0;
   font-family: 'Poppins',sans-serif;
}
body
{
	background: #0a2a43;
	min-height: 1500px;
}
section
{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
section:before
{
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to top,#0a2a43,transparent);
	z-index: 10000;
}
section:after
{
	content: '';
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: #0a2a43;
	z-index: 10000;
	mix-blend-mode: color;
}
section img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
#text
{
  position: relative;
  color: #fff;
  font-size: 10em;
  z-index: 1;
}
#road
{
	z-index: 1;
}