<!DOCTYPE html>
<html>
<head>
<!-- 头部区域 - 元信息和样式表 -->
<meta charset="UTF-8">
<title>Mountain Vista 旅行中心</title>
<style>
/* 全局样式 */
html, body {
overflow: hidden; /* 禁用全局滚动 */
}
body {
margin: 0;
font-family: sans-serif;
--color-gray: #aaa; /* 定义灰色变量 */
--color-purple: #3E3753; /* 定义紫色变量 */
--ease: cubic-bezier(.44,0,.63,1); /* 缓动函数 */
/* 背景设置 */
background-image: url(https://alieninterfaces.com/assets/backgrounds/vista_background.jpg);
background-size: cover;
background-attachment: fixed;
}
/* 平滑滚动容器 */
#smooth-wrapper {
position: relative;
max-width: 500px;
height: 100%;
width: 100%;
margin: auto;
overflow: auto;
border-radius: 35px;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
/* 平滑滚动内容 */
#smooth-content {
overflow-y: hidden !important;
background: white;
min-height: 100%;
}
/* 顶部英雄区域样式 */
.hero {
position: relative;
height: 40vh;
min-height: 300px;
color: white;
display: flex;
}
/* 英雄区域圆形装饰 */
.hero-circle {
width: 25px;
height: 25px;
background: #D7DCEB;
border-radius: 50%;
margin-left: 1rem;
margin-top: 0.5rem;
}
/* 英雄区域按钮 */
.hero-btn {
overflow: visible;
width: 50px;
}
/* 按钮动画效果 */
.hero-btn-circle {
cursor: pointer;
transform-origin: center center;
transition: transform 0.4s var(--ease);
}
.hero-btn:hover .hero-btn-circle {
transform: scale(1.1);
}
/* 标题样式 */
h1 {
font-size: 0.7rem;
font-weight: 100;
margin: 1rem 0;
text-transform: uppercase;
}
/* 英雄区域背景 */
.hero-bg {
position: absolute;
height: 200%;
width: 100%;
background-size: auto 50%;
background-repeat: no-repeat;
background-position: left top;
}
/* 英雄内容区域 */
.hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 顶部内容布局 */
.hero-top {
display: flex;
justify-content: space-between;
width: 100%;
padding: 2em 1em;
box-sizing: border-box;
}
/* 波浪形分隔线 */
.wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 50px;
}
/* 隐藏的波浪形（用于动画） */
.hidden-wave {
display: none;
}
/* 渐变遮罩 */
.gradient {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, #9398c4, rgb(147, 152, 196, 0.5) 100px, rgb(147, 152, 196, 0) 200px);
mix-blend-mode: multiply;
opacity: 0.8;
z-index: 100;
pointer-events: none;
}
/* 主要内容区域 */
.content {
background: white;
position: relative;
color: var(--color-purple);
}
/* 内容内边距 */
.content-inner {
padding: 2em;
max-width: 800px;
margin: auto;
}
/* 标签样式 */
.label {
position: absolute;
top: -10px;
display: flex;
color: var(--color-gray);
align-items: center;
}
/* 标签图标 */
.label-icon {
border-radius: 50%;
width: 30px;
height: 30px;
background: #c97984;
}
/* 标签文字 */
.label-text {
font-size: 10px;
text-transform: uppercase;
line-height: 0.5em;
height: 1em;
border: 1px solid var(--color-gray);
padding: 0.3rem 0.8rem;
margin-left: 1em;
border-radius: 20px;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
/* 标题区域 */
.title {
margin: 2em 0;
display: flex;
justify-content: space-between;
font-size: 1.5rem;
font-weight: 400;
text-transform: capitalize;
}
/* 价格样式 */
.price {
display: flex;
align-items: center;
}
/* 价格后面的小圆点 */
.price::after {
margin-left: 0.2em;
content: '';
display: block;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 2px solid currentColor;
}
/* 网格容器 */
.grid-container {
margin: 3em 0;
text-align: center;
font-size: 0.8rem;
color: #B5B5B8;
}
/* 网格布局 */
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
margin: 1em 0;
}
/* 加粗网格 */
.grid.bold {
font-weight: 800;
}
/* 分隔线 */
.line {
width: 100%;
height: 2px;
background: var(--color-gray);
margin: 1em 0;
}
/* 无外边距分隔线 */
.line.no-margin {
margin: 0;
}
/* 浅色分隔线 */
.line.lighter {
opacity: 0.25;
}
/* 药丸形状按钮 */
.pill {
display: inline-block;
padding: 0.5em 1em;
border-radius: 20px;
background: var(--color-gray);
color: white;
height: 1.5em;
width: 2.5em;
margin: auto;
align-self: center;
font-size: 10px;
text-transform: uppercase;
transition: filter 0.2s var(--ease);
}
/* 不同颜色的药丸按钮 */
.pill:nth-child(1) {
background: #C97984;
}
.pill:nth-child(2) {
background: #A789F7;
}
.pill:nth-child(3) {
background: #FDBA7F;
}
.pill:nth-child(4) {
background: #FEA1C0;
}
.pill:nth-child(5) {
background: #BF50FF;
}
/* 药丸按钮悬停效果 */
.pill:hover {
filter: saturate(2);
}
/* 图片网格布局 */
.img-grid {
display: grid;
font-size: 0.8rem;
grid-gap: 0.5em;
padding-right: 1.5em;
box-sizing: border-box;
width: 100%;
grid-template-columns: 100px 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"img header . price"
"img subhead subhead ."
"img contenta contentb contentc"
"img contentd contente contentf";
}
/* 图片网格中的图片 */
.img-grid img {
grid-area: img;
}
/* 图片网格各部分定位 */
.img-grid-header { grid-area: header; }
.img-grid-price { grid-area: price; text-align: right; }
.img-grid-subhead { grid-area: subhead; }
.img-grid-contenta { grid-area: contenta; }
.img-grid-contentb { grid-area: contentb; }
.img-grid-contentc { grid-area: contentc; }
.img-grid-contentd { grid-area: contentd; }
.img-grid-contente { grid-area: contente; }
.img-grid-contentf { grid-area: contentf; }
/* 灰色文字 */
.gray {
color: var(--color-gray);
font-size: 0.7rem;
}
/* 文字居中 */
.center {
text-align: center;
}
/* 文字右对齐 */
.right {
text-align: right;
}
/* 按钮区域 */
.button-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 2em 0;
font-size: 0.8rem;
height: 50px;
}
/* 按钮文字区域 */
.button-section-text {
flex: 1;
display: flex;
flex-direction: column;
margin-right: 1rem;
justify-content: space-between;
height: 100%;
}
/* 按钮文字内容 */
.button-section-text-copy {
flex: 1;
}
/* 按钮容器 */
.button-holder {
position: relative;
}
/* 按钮阴影 */
.button-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
border-radius: 15px;
filter: blur(20px);
transform: translate(10px, 10px);
}
/* 主按钮样式 */
.button {
background-color: #9972f5;
background: linear-gradient(-45deg, #7456ce, #9871F9);
color: white;
border: none;
font-size: 12px;
border-radius: 15px;
padding: 1rem 2.2rem;
cursor: pointer;
position: relative;
transform: scale(1);
transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
/* 按钮悬停效果 */
.button:hover {
transform: scale(1.05);
background-color: #7e5ae5;
}
/* 导航栏 */
nav {
display: flex;
justify-content: space-between;
padding: 1.5rem 0.5rem 1rem;
}
/* 导航项 */
a-nav-item {
display: flex;
flex-direction: column;
}
/* 底部链接区域 */
#link {
z-index: 100;
bottom: 0;
left: 0;
position: fixed;
z-index: 1000;
padding: 0.5rem 1rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
color: white;
}
/* 链接样式 */
#link a {
text-decoration: none;
color: currentColor;
cursor: pointer;
}
/* 链接悬停效果 */
#link a:hover {
color: rgb(208, 101, 111);
cursor: pointer;
text-decoration: none;
}
/* 外星链接样式 */
.ai-link {
display: flex;
align-items: center;
margin: 0.5rem 0;
}
/* 外星链接中的SVG图标 */
.ai-link svg {
margin-right: 0.5em;
}
/* 响应式设计 - 小屏幕 */
@media screen and (max-width: 600px) {
#smooth-wrapper {
transform-origin: center center;
transform: scale(0.5);
}
}
/* 响应式设计 - 低高度屏幕 */
@media screen and (max-height: 600px) {
#smooth-wrapper {
height: 150% !important;
transform-origin: center center;
transform: scale(0.5);
}
}
</style>
</head>
<body>
<!-- 底部链接区域 -->
<div id="link">
<a class="ai-link" target="_blank" href="https://alieninterfaces.com">
<!-- 外星人Logo SVG -->
<svg version="1.1" id="alien-logo" xmlns="http://www.w3.org/2000/svg" width="25px" viewBox="0 0 65.96 73.79">
<path fill="currentColor" d="M40.83,71.34c-1.01-0.87-1.98-1.71-2.91-2.51c-1.82-1.65-3.6-2.98-5.11-4.23c-0.76-0.61-1.46-1.21-2.13-1.73
c-0.67-0.5-1.29-0.97-1.84-1.38c-2.21-1.69-3.44-2.64-3.44-2.64s1.43,0.56,4.01,1.66c0.64,0.28,1.36,0.59,2.14,0.92
c0.77,0.36,1.59,0.78,2.48,1.23c1.77,0.91,3.83,1.89,5.97,3.21c1.08,0.65,2.22,1.32,3.4,2.03c1.18,0.72,2.33,1.55,3.56,2.38
c1.44,0.95,2.89,2.02,4.35,3.15c2.01-0.39,3.89-1.12,5.61-2.11c-3.57-5.18-6.73-9.92-9.37-13.96c-5.49-8.41-8.69-13.78-8.69-13.78
s4.6,4.24,11.52,11.55c3.28,3.46,7.09,7.64,11.15,12.37c0.98-1.13,1.81-2.38,2.48-3.72c-3-6.28-5.27-12.11-6.89-16.85
c-0.64-1.86-1.19-3.56-1.64-5.06c-0.46-1.5-0.84-2.79-1.12-3.86c-0.57-2.13-0.86-3.31-0.86-3.31s0.63,1.05,1.77,2.93
c1.12,1.89,2.73,4.62,4.72,7.98c1.73,2.93,3.73,6.34,5.94,10.1c0-0.01,0-0.02,0-0.03V18.11C65.96,8.11,57.86,0,47.85,0H18.44
C8.43,0,0.32,8.11,0.32,18.11v37.56c0,10,8.11,18.11,18.11,18.11h25.05C42.58,72.95,41.71,72.1,40.83,71.34z"/>
</svg>
<div id="linkText">Alien Interfaces</div>
</a>
<div>
See the process on <a target="_blank" href="https://www.youtube.com/watch?v=TalY4wbnK9s">YouTube</a>
</div>
</div>
<!-- 主内容包装器 -->
<div id="wrapper">
<!-- 平滑滚动区域 -->
<div id="smooth-wrapper">
<div id="smooth-content">
<!-- 顶部英雄区域 -->
<section class="hero">
<!-- 背景图片 -->
<div class="hero-bg" data-lag="0.1" style="background-image: url('https://alieninterfaces.com/static/pages/01-vista/assets/header.jpg');"></div>
<!-- 顶部内容 -->
<div class="hero-content">
<div class="hero-top" data-lag="0.3">
<div class="hero-circle"></div> <!-- 圆形装饰 -->
<h1>travel hub</h1>
<!-- 圆形按钮SVG -->
<svg id="Layer_3" class="hero-btn" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.01 49.02">
<defs>
<style>
.cls-2 { fill: url(#radial-gradient-3); }
.cls-3 { fill: url(#radial-gradient-2); }
.cls-4 { fill: url(#radial-gradient); }
</style>
<radialGradient id="radial-gradient" cx="-6.67" cy="-15.77" r="21.38" gradientTransform="translate(7.36 33.47) rotate(90) scale(1.17 .9)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#605988"/>
<stop offset="1" stop-color="#605988" stop-opacity="0"/>
</radialGradient>
<radialGradient id="radial-gradient-2" cx="22.78" cy="27.71" r="18.8" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d6d0d1"/>
<stop offset=".4" stop-color="#dacfd0"/>
<stop offset="1" stop-color="#f9f9f9"/>
</radialGradient>
<radialGradient id="radial-gradient-3" cx="19.9" cy="18.51" r="16.54" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f8f8f8"/>
<stop offset="1" stop-color="#f7f7f7" stop-opacity="0"/>
</radialGradient>
</defs>
<g class="hero-btn-circle">
<ellipse class="cls-4" cx="21.65" cy="25.64" rx="19.29" ry="25.11" transform="translate(-10.76 16.95) rotate(-34.81)"/>
<circle class="cls-3" cx="18.8" cy="18.8" r="18.8"/>
<circle class="cls-2" cx="18.8" cy="18.8" r="16.54"/>
<path fill="#ff9762" d="m24.38,14.35c-6.08-2.63-8.09-4.78-11.19,0-3.14,4.84-5.84,6.05,0,8.95,5.84,2.9,8.27,4.47,11.19,0s6.08-6.32,0-8.95Zm-6.09,5.68c-1.14,0-2.07-.65-2.07-1.45s.93-1.45,2.07-1.45,2.07.65,2.07,1.45-.93,1.45-2.07,1.45Z"/>
</g>
</svg>
</div>
</div>
<!-- 波浪形分隔线 -->
<svg version="1.1" id="wave" class="wave" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
viewBox="0 0 362.89 65.69">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0,30.76c0,0,24.49-26.11,64.33-26.11c43.59,0,104.58,54.91,145.23,54.91s49.6-16.94,87.48-16.94
s65.84,16.94,65.84,16.94v6.13H0V30.76z"/>
</svg>
<!-- 隐藏的波浪形（用于动画） -->
<svg version="1.1" id="wave2" class="hidden-wave" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 362.89 65.69">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0,40.76c0,0,24.49-26.11,64.33-26.11c43.59,0,93.58,14.91,134.23,14.91s60.6-16.94,98.48-16.94
s65.84,16.94,65.84,16.94v36.13H0V40.76z"/>
</svg>
<svg version="1.1" id="wave3" class="hidden-wave" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 362.89 65.69">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0,10.76c0,0,24.49,13.89,64.33,13.89c43.59,0,93.58-16.09,134.23-16.09s60.6,34.06,98.48,34.06
s65.84-13.06,65.84-13.06v36.13H0V10.76z"/>
</svg>
</section>
<!-- 主要内容区域 -->
<section class="content">
<div class="content-inner">
<!-- 标签 -->
<div class="label">
<div class="label-icon"></div>
<div class="label-text">open</div>
</div>
<!-- 标题和价格 -->
<div class="title">
<div>Mountain Vista</div>
<div class="price">$2,342</div>
</div>
<!-- 滑雪装备网格 -->
<div class="grid-container">
<div class="grid bold" data-lag="0.01">
<div>SKI</div>
<div>SKI</div>
<div>SKI</div>
<div>BOARD</div>
<div>BOARD</div>
</div>
<div class="line"></div>
<div class="grid" data-lag="0.03">
<div class="pill"></div>
<div class="pill"></div>
<div class="pill"></div>
<div class="pill"></div>
<div class="pill"></div>
<div>150cm</div>
<div>155cm</div>
<div>160cm</div>
<div>150cm</div>
<div>155cm</div>
<div>$30</div>
<div>$30</div>
<div>$30</div>
<div>$35</div>
<div>$35</div>
</div>
<div class="line lighter"></div>
</div>
<!-- 设施图片网格 -->
<div class="img-grid">
<img src="https://alieninterfaces.com/static/pages/01-vista/assets/img.svg" width="80px" alt="img"/>
<div class="img-grid-header">Amenities</div>
<div class="img-grid-price">Available all year</div>
<div class="img-grid-subhead gray">Ski-in/ski-out</div>
<div class="img-grid-contenta gray">rental</div>
<div class="img-grid-contentb gray center">lessons</div>
<div class="img-grid-contentc gray right">Snowmaking</div>
<div class="img-grid-contentd gray">Ski patrol</div>
<div class="img-grid-contente gray center">dining</div>
<div class="img-grid-contentf gray right">pool</div>
</div>
<div class="line lighter"></div>
<!-- 按钮区域 -->
<div class="button-section">
<div class="button-section-text">
<div class="button-section-text-copy">
Available Now
</div>
<div class="line lighter no-margin" style="opacity: 0.1;"></div>
</div>
<div class="button-holder">
<div class="button-shadow"></div>
<button class="button">PURCHASE</button>
</div>
</div>
<!-- 导航菜单 -->
<nav data-lag="0.3">
<a-nav-item>
<span slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.43 20.43" width="40px" height="40px">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #53516c;
stroke-miterlimit: 10;
}
</style>
</defs>
<path class="cls-1" d="m9.43,10.22c17.39,9.17,9.96,16.6.79-.79-9.17,17.39-16.6,9.96.79.79C-6.39,1.05,1.05-6.39,10.22,11.01c9.17-17.39,16.6-9.96-.79-.79Z"/>
</svg>
</span>
</a-nav-item>
<a-nav-item>
<span slot="icon">
<img src="https://alieninterfaces.com/static/pages/01-vista/assets/circle.svg" width="20px" height="20px"/>
</span>
<span slot="label">MORE</span>
</a-nav-item>
<a-nav-item>
<span slot="icon">
<img src="https://alieninterfaces.com/static/pages/01-vista/assets/triangle.svg" width="40px" height="40px"/>
</span>
</a-nav-item>
<a-nav-item>
<span slot="icon">
<img src="https://alieninterfaces.com/static/pages/01-vista/assets/circle.svg" width="20px" height="20px"/>
</span>
<span slot="label">LIST</span>
</a-nav-item>
<a-nav-item>
<span slot="icon">
<img src="https://alieninterfaces.com/static/pages/01-vista/assets/curve.svg" width="20px" height="20px"/>
</span>
<span slot="label">SAVE</span>
</a-nav-item>
</nav>
</div>
</section>
<div class="gradient"></div>
</div>
</div>
</div>
<!-- JavaScript 代码 -->
<script>
// 注册GSAP插件
gsap.registerPlugin(
ScrollTrigger,
ScrollSmoother,
MorphSVGPlugin
);
// 创建平滑滚动效果
ScrollSmoother.create({
normalizeScroll: true, // 标准化滚动
smooth: 1, // 平滑时间（秒）
effects: true, // 启用元素效果（data-speed和data-lag属性）
smoothTouch: 0.1, // 触摸设备的平滑时间
});
// 创建波浪动画时间线
const waveTL = gsap.timeline({
repeat: -1, // 无限循环
yoyo: true, // 往返动画
ease: "none", // 无缓动
});
// 波浪形变动画
waveTL.to("#wave path", {
duration: 5, // 持续时间5秒
morphSVG: "#wave3 path", // 变形到wave3的形状
ease: "quad.inOut", // 缓动函数
});
waveTL.to("#wave path", {
duration: 5, // 持续时间5秒
morphSVG: "#wave2 path", // 变形到wave2的形状
ease: "quad.inOut", // 缓动函数
});
</script>
</body>
</html>
index.html