185 lines
10 KiB
Plaintext
185 lines
10 KiB
Plaintext
|
|
|
|
|
|
|
|
<!-- 1. Anchor: 占位符 -->
|
|
<div class="vgs-anchor" id="parallax-anchor-a">
|
|
|
|
<!-- 2. Viewport: 实际视窗 -->
|
|
<div class="vgs-viewport bg-white text-black" id="parallax-viewport-a">
|
|
|
|
<!-- 3. Wrapper: 横向滚动容器 -->
|
|
<div class="vgs-wrapper">
|
|
|
|
<!-- Card 1: Tech (Cyan Theme) -->
|
|
<div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
|
|
<!-- 艺术背景球 -->
|
|
<div class="absolute w-[400px] h-[400px] bg-cyan-400 rounded-full blur-[80px] opacity-80 top-[20%] left-[20%] animate-float pointer-events-none"></div>
|
|
|
|
<h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">3D <br> Visuals</h2>
|
|
<p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
|
|
打破维度的数字建模。<br>从几何抽象到超写实渲染。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card 2: Art (Purple Theme) -->
|
|
<div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
|
|
<!-- 艺术背景变形体 -->
|
|
<div class="absolute w-[600px] h-[600px] bg-fuchsia-500 rounded-[40%_60%_70%_30%_/_40%_50%_60%_50%] blur-[80px] opacity-80 bottom-[-100px] right-[-100px] animate-morph pointer-events-none"></div>
|
|
|
|
<h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">Generative <br> Art</h2>
|
|
<p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
|
|
算法生成的无限可能。<br>每一帧都是独一无二的计算。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card 3: Energy (Orange Theme) -->
|
|
<div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
|
|
<!-- 渐变背景 -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-orange-100 to-red-50 opacity-60 pointer-events-none"></div>
|
|
<div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-orange-500/20 to-transparent pointer-events-none"></div>
|
|
|
|
<h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">Motion <br> Dynamic</h2>
|
|
<p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
|
|
赋予静态画面以生命。<br>流畅的动效设计指引视线。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card 4: Transition (Future) -->
|
|
<!-- 最后一张卡片，视觉上引导进入黑色区域 -->
|
|
<div class="vgs-card flex flex-col items-center justify-center bg-white relative overflow-hidden">
|
|
<!-- 渐变遮罩：模拟进入下方的纯黑背景 -->
|
|
<div class="absolute bottom-0 left-0 w-full h-[40%] bg-gradient-to-t from-black via-black/50 to-transparent z-20 pointer-events-none"></div>
|
|
|
|
<h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase leading-none tracking-tighter mix-blend-difference text-black">The <br> Future</h2>
|
|
<p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
|
|
准备好进入深色领域了吗？
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =========================================
|
|
SECTION 3: IMMERSIVE DARK TRANSITION
|
|
纯黑部分，科技风
|
|
========================================= -->
|
|
<section class="bg-black text-white py-24 md:py-32 relative z-20" id="start-journey">
|
|
<div class="container mx-auto px-6 max-w-7xl">
|
|
<!-- 左侧装饰线 -->
|
|
<div class="border-l-4 border-white pl-8 mb-16">
|
|
<h2 class="text-4xl md:text-6xl font-bold tracking-tighter">沉浸式体验</h2>
|
|
</div>
|
|
|
|
<p class="text-gray-400 text-lg max-w-2xl mb-20 leading-relaxed">
|
|
刚刚经历了高饱和度的视觉冲击，现在让我们回归纯粹的数据流。我们为 Web3、元宇宙概念项目提供底层视觉架构。
|
|
</p>
|
|
|
|
<!-- 特性列表 -->
|
|
<ul class="space-y-0 divide-y divide-gray-800">
|
|
<li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
|
|
<span class="group-hover:text-white text-gray-300 transition-colors">WebGL 开发</span>
|
|
<span class="font-mono text-gray-600 text-lg">01</span>
|
|
</li>
|
|
<li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
|
|
<span class="group-hover:text-white text-gray-300 transition-colors">Shader 编程</span>
|
|
<span class="font-mono text-gray-600 text-lg">02</span>
|
|
</li>
|
|
<li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
|
|
<span class="group-hover:text-white text-gray-300 transition-colors">交互原型</span>
|
|
<span class="font-mono text-gray-600 text-lg">03</span>
|
|
</li>
|
|
<li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
|
|
<span class="group-hover:text-white text-gray-300 transition-colors">音频可视化</span>
|
|
<span class="font-mono text-gray-600 text-lg">04</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =========================================
|
|
SECTION 4: VGS PARALLAX B (黑色画廊)
|
|
黑色背景，展示项目图片
|
|
========================================= -->
|
|
<div class="vgs-anchor" id="parallax-anchor-b">
|
|
<div class="vgs-viewport bg-black text-white" id="parallax-viewport-b">
|
|
<div class="vgs-wrapper">
|
|
|
|
<!-- Intro Card -->
|
|
<div class="vgs-card flex flex-col items-center justify-center">
|
|
<h2 class="text-5xl md:text-7xl font-black uppercase mb-4 text-white">Selected <br> Works</h2>
|
|
<p class="text-gray-500 text-lg">向右滑动查看更多项目案例</p>
|
|
</div>
|
|
|
|
<!-- Work 1 -->
|
|
<div class="vgs-card flex flex-col items-center justify-center bg-neutral-900">
|
|
<div class="relative w-[90vw] md:w-[60vw] h-[50vh] md:h-[60vh] overflow-hidden group cursor-pointer">
|
|
<img src="https://picsum.photos/seed/tech1/1200/800" alt="Project 1" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 ease-out">
|
|
|
|
<!-- 悬停显示的信息 -->
|
|
<div class="absolute bottom-8 left-8 z-10 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
|
|
<h3 class="text-4xl font-bold text-white mb-2">Cyber Punk City</h3>
|
|
<p class="text-sm uppercase tracking-wider text-cyan-400">Concept Art / 2024</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Work 2 -->
|
|
<div class="vgs-card flex flex-col items-center justify-center bg-neutral-900">
|
|
<div class="relative w-[90vw] md:w-[60vw] h-[50vh] md:h-[60vh] overflow-hidden group cursor-pointer">
|
|
<img src="https://picsum.photos/seed/art2/1200/800" alt="Project 2" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 ease-out">
|
|
|
|
<div class="absolute bottom-8 left-8 z-10 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
|
|
<h3 class="text-4xl font-bold text-white mb-2">Fluid Sim</h3>
|
|
<p class="text-sm uppercase tracking-wider text-purple-400">WebGL Experiment</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Card -->
|
|
<div class="vgs-card flex flex-col items-center justify-center pb-[20vh]">
|
|
<h2 class="text-5xl md:text-7xl font-black uppercase mb-10 text-white">Ready To <br> Start?</h2>
|
|
<button class="px-12 py-5 bg-white text-black font-bold text-sm uppercase tracking-widest hover:bg-gray-200 transition-colors duration-300">
|
|
联系我们
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 补充样式：用于视差库无法完全覆盖的特定效果 -->
|
|
<style>
|
|
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
|
|
|
|
/* 确保图片在悬停时有平滑过渡 */
|
|
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
|
|
.group:hover .group-hover\:opacity-100 { opacity: 1; }
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://www.gvsds.com/assets/js/vgs-parallax.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const vgs = new VGSParallax();
|
|
|
|
// 初始化 Zone A (活力多彩区) - 3个间隔 => 3屏宽滚动
|
|
vgs.bind('#parallax-anchor-a', '#parallax-viewport-a', {
|
|
scrollLength: window.innerWidth * 3
|
|
});
|
|
|
|
// 初始化 Zone B (黑色画廊区) - 3个间隔 => 3屏宽滚动
|
|
vgs.bind('#parallax-anchor-b', '#parallax-viewport-b', {
|
|
scrollLength: window.innerWidth * 3
|
|
});
|
|
});
|
|
</script>
|
|
|