<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Supernova - 响应式视差页面</title>
<!-- 字体引入 -->
<link href="https://fonts.cdnfonts.com/css/conserta" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/sansino" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/marllgon" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/citation" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/dreamscar" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
/* ==================== 基础样式 ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: 'Citation', sans-serif;
}
/* ==================== 视差滚动容器样式 ==================== */
.parallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* ==================== 视差层基础样式 ==================== */
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /* 确保图片覆盖整个容器 */
object-position: center;
}
/* ==================== 各视差层深度设置 ==================== */
.parallax__layer__0 {
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
transform: translateZ(-200px) scale(3);
}
.parallax__layer__2 {
transform: translateZ(-100px) scale(2);
}
.parallax__layer__3 {
transform: translateZ(0px) scale(1) translateY(0%); /* 上移 10% */
display: flex;
justify-content: center;
align-items: center;
}
/* ==================== 视差覆盖层样式 ==================== */
.parallax__cover {
background: #2d112b;
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40vh;
z-index: 2;
}
/* ==================== 标题样式 ==================== */
.title {
z-index: 3;
font-size: clamp(2rem, 8vw, 4rem); /* 使用clamp实现响应式字体 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px white;
text-align: center;
font-family: 'Citation', sans-serif;
text-transform: lowercase;
transition: 0.7s all;
animation: fading ease-in 1s forwards;
animation-delay: 2.5s;
opacity: 0;
padding: 0 20px;
width: 100%;
}
.titlebis {
transition: 1s all;
}
.title:hover .titlebis {
font-size: clamp(2.5rem, 10vw, 5rem);
-webkit-text-fill-color: #a27591;
-webkit-text-stroke: 1px #a27591;
}
.subtitle {
font-size: clamp(0.6rem, 2vw, 1rem);
transition: 1s all;
animation: fading ease-in 1s forwards;
animation-delay: 3s;
opacity: 0;
margin-top: 1rem;
}
.title:hover .subtitle {
-webkit-text-fill-color: #a27591;
-webkit-text-stroke: 1px #a27591;
}
/* ==================== 旋转圆圈动画 ==================== */
.spinner-wrap {
position: relative;
top: clamp(1rem, 5vw, 3rem);
width: 100%;
display: flex;
justify-content: center;
}
.spinner-item {
border: 2px solid white;
border-radius: 50%;
height: clamp(10rem, 40vw, 20rem);
width: clamp(10rem, 40vw, 20rem);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: zoom 2s linear 0.75s infinite;
transition: 1s all;
}
.spinner-item--2 {
animation-delay: 1.25s;
}
.spinner-item--3 {
animation-delay: 1.75s;
}
.title:hover .spinner-item {
width: clamp(12rem, 50vw, 25rem);
height: clamp(12rem, 50vw, 25rem);
top: clamp(0.5rem, 3vw, 2rem);
border: 2px solid #a27591;
}
/* ==================== 导航栏样式 ==================== */
.navbar {
width: 100%;
height: clamp(4rem, 10vh, 8rem);
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: row;
align-items: center;
padding: 0 clamp(1rem, 3vw, 3rem);
position: relative;
}
.avatar {
width: clamp(3rem, 8vw, 7rem);
height: clamp(3rem, 8vw, 7rem);
background-color: rgba(0, 0, 0, 0.9);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
}
.avatar img {
border-radius: 50%;
border: 1px solid #835983;
padding: clamp(0.3rem, 0.8vw, 0.8rem);
height: 80%;
width: 80%;
object-fit: cover;
}
.welcome {
font-size: clamp(1.2rem, 4vw, 3rem);
color: white;
font-family: 'Citation';
text-transform: lowercase;
mix-blend-mode: soft-light;
z-index: 4;
position: relative;
margin-left: clamp(0.5rem, 2vw, 2rem);
white-space: nowrap;
}
.name {
position: absolute;
color: #835983;
font-size: clamp(0.6rem, 1.5vw, 1.5rem);
top: 50%;
transform: translateY(-50%);
font-family: 'Marllgon', sans-serif;
left: clamp(6rem, 15vw, 15rem);
text-transform: uppercase;
letter-spacing: clamp(0.1rem, 0.3vw, 0.3rem);
}
/* ==================== 响应式调整 - 手机设备 ==================== */
@media (max-width: 767px) {
.navbar {
flex-wrap: wrap;
height: auto;
padding: 1rem;
}
.name {
position: relative;
left: 0;
top: 0;
transform: none;
margin-top: 0.5rem;
width: 100%;
order: 3;
padding-left: calc(clamp(3rem, 8vw, 7rem) + clamp(0.5rem, 2vw, 2rem));
}
}
/* ==================== 动画定义 ==================== */
@keyframes fading {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zoom {
0% {
transform: translate(-50%, -50%) scale(0.2);
opacity: 0;
}
50% {
opacity: 0.9;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- ==================== 视差滚动区域 ==================== -->
<div class="parallax">
<!-- 背景层 - 最远 -->
<div class="parallax__layer parallax__layer__0">
<img src="https://zupimages.net/up/23/02/4ijg.png" alt="背景层1"/>
</div>
<!-- 第二背景层 -->
<div class="parallax__layer parallax__layer__1">
<img src="https://zupimages.net/up/23/02/s7w5.png" alt="背景层2"/>
</div>
<!-- 第三背景层 -->
<div class="parallax__layer parallax__layer__2">
<img src="https://zupimages.net/up/23/02/ibn6.png" alt="背景层3"/>
</div>
<!-- 前景层 - 最近 -->
<div class="parallax__layer parallax__layer__3">
<!-- 标题内容 -->
<div class="title">
<!-- 旋转圆圈动画 -->
<div class="spinner-wrap">
<div class="spinner-item"></div>
<div class="spinner-item spinner-item--2"></div>
<div class="spinner-item spinner-item--3"></div>
</div>
<!-- 主标题 -->
<div class="titlebis">Supernova</div>
<!-- 副标题 -->
<div class="subtitle">Caramels lollipop dessert chocolate bar jujubes marshmallow muffin ice cream.</div>
</div>
<img src="https://zupimages.net/up/23/02/dbno.png" alt="前景层"/>
</div>
<!-- 视差覆盖层 - 导航栏 -->
<div class="parallax__cover">
<div class="navbar">
<!-- 头像 -->
<div class="avatar">
<img src="https://www.zupimages.net/up/22/29/rm9q.png" alt="用户头像"/>
</div>
<!-- 欢迎文字 -->
<div class="welcome">Welcome</div>
<!-- 名字 -->
<div class="name"><span>Évangélie Bennett</span></div>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js