滚动叙事开场 — tap4fun 公司简介

做一个滚动驱动的单页 PPT 开场。用户向下滚动，背景在 3 个静帧场景之间用 2 段过渡视频无缝衔接，前景文案随场景切换。不循环，滚到底停在最后一帧。

一、资产清单

当前目录文件（路径用相对路径，已去除空格）：

./scene1.png        场景1静帧（开场）
./scene2.png        场景2静帧（中段）
./scene3.png        场景3静帧（终场）
./trans1to2.mp4     场景1→2 过渡视频
./trans2to3.mp4     场景2→3 过渡视频
./reference.png     排版参考图（仅用于学习版式，不出现在页面里）

重要：没有一条贯穿始终的 main 视频。叙事是 "静帧 → 过渡视频 → 静帧 → 过渡视频 → 静帧" 的 5 段混合结构。

二、叙事结构与滚动映射

页面总高度 = 500vh。把全局 scroll 进度 p ∈ [0, 1] 划成 5 个区间：

区间	p 范围	背景层	文案
①	0.00 – 0.20	`scene1.png` 静帧	场景1文案常显
②	0.20 – 0.40	`trans1to2.mp4` 播放	文案 fade 1→2
③	0.40 – 0.60	`scene2.png` 静帧	场景2文案常显
④	0.60 – 0.80	`trans2to3.mp4` 播放	文案 fade 2→3
⑤	0.80 – 1.00	`scene3.png` 静帧	场景3文案 + CTA

视频驱动规则： - 在区间 ② 内：trans1to2.currentTime = ((p - 0.20) / 0.20) × trans1to2.duration - 在区间 ④ 内：trans2to3.currentTime = ((p - 0.60) / 0.20) × trans2to3.duration - 静帧区间：对应图片 opacity:1，所有视频 opacity:0 - 过渡区间：对应视频 opacity:1，所有图片 opacity:0 - 层切换用 0.3s ease opacity 过渡，避免硬切

不循环。滚动到底停在场景3，CTA 可点击。

三、文案内容（tap4fun 公司简介）

所有文案沿用 reference.png 的版式骨架：顶部导航 + 左上大标题/副标/CTA + 右上两组统计 + 底部品牌行 + 社交图标。

顶部导航（三个场景共享，固定）： - 左：tap4fun logo - 中：About / Games / Studio / Careers / Contact - 右：Press Kit（次按钮）/ Join Us（主按钮）

场景 1 — Brand Vision

主标题：BUILDING WORLDS THAT ENDURE
副标：Global mobile strategy, crafted in Chengdu since 2008.
描述（CTA 下方小字）：A studio of builders, designers, and engineers shaping interactive worlds that millions return to.
CTA pill：Discover tap4fun →
右上统计 ×2：
200M+ PLAYERS WORLDWIDE — From day-one launches to franchises that still grow today.
15+ YEARS IN THE INDUSTRY — Pioneers of cross-cultural SLG, scaling across regions.

场景 2 — Portfolio

主标题：GAMES THAT DEFINE A GENRE
副标：Strategy titles that turn empires into stories.
描述：From real-time war to long-tail kingdoms — operated live, every hour, every region.
CTA pill：Explore our games →
右上统计 ×2：
10+ FLAGSHIP TITLES — Invasion: Modern Empire · Last Empire–War Z · Age of Z Origins.
150+ COUNTRIES SERVED — 20+ languages, 24/7 live operations.

场景 3 — Team & Future

主标题：THE NEXT WORLD STARTS HERE
副标：Builders, designers, engineers — one studio, one mission.
描述：We are hiring across engineering, art, game design, and live operations.
CTA pill：Join the studio →
右上统计 ×2：
800+ TEAM MEMBERS — Engineering, art, ops, and live-game craft, under one roof.
∞ POSSIBILITIES — AI, cross-platform, new frontiers in interactive entertainment.
底部品牌行（只在场景3显示）：Invasion · Last Empire · Age of Z · Kings Throne · Hero Clash
社交图标：Facebook · X · LinkedIn · Bilibili

四、排版语言（学习 reference.png）

观察 reference.png 后还原以下要点：

字体
主标题：粗体无衬线 condensed/grotesk，全大写，字重对比极强 → 用 Google Fonts Archivo Black 或 Anton
正文/副标：现代无衬线 → Inter 400/500
统计数字：与主标同字体保持一致性
字号层级：主标 clamp(2.8rem, 6vw, 5.5rem) / 统计数字 clamp(1.8rem, 3vw, 2.6rem) / 副标 1rem / 描述 0.85rem
对齐：非对称三栏——左上 / 右上 / 底部一行；导航横贯顶部
颜色：背景由场景图决定，文字默认黑色 #0a0a0a；CTA pill 黑底白字带白色圆形 → 箭头 icon；强调色橙 #FF6A1A（用在 hover / 强调小元素）
装饰：CTA 是 pill button 带末尾圆形 → 图标；统计数字下有 1 行细描述；底部品牌名用 · 分隔
气质：极简、留白大、字重对比强、设计克制
关键原则：三个场景共用同一套版式骨架，只换文字内容。滚动时让用户感到"画面在变、版式在呼吸"，而不是切到一个完全不同的页面。

五、技术实现

技术栈：纯 HTML + CSS + JavaScript 单文件，不用任何框架。直接通过 Google Fonts CDN 引字体。

背景层结构

<div class="bg-layer">
  <img id="s1" src="./scene1.png">
  <video id="v12" src="./trans1to2.mp4" muted playsinline preload="auto"></video>
  <img id="s2" src="./scene2.png">
  <video id="v23" src="./trans2to3.mp4" muted playsinline preload="auto"></video>
  <img id="s3" src="./scene3.png">
</div>

所有 5 个元素：position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease;

视频要点（避坑）

muted + playsinline + preload="auto" 必须有
不要 autoplay，不要 controls，不要 loop
iOS Safari 必须 playsinline（小写）
视频用 currentTime 驱动，不调用 play()

滚动驱动

let targetT12 = 0, targetT23 = 0;
function onScroll() {
  const p = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  // 计算各层 opacity 与视频 currentTime
  // 用变量缓存目标值，rAF 里再赋给 video.currentTime
}
function tick() {
  v12.currentTime += (targetT12 - v12.currentTime) * 0.25; // 缓动 seek
  v23.currentTime += (targetT23 - v23.currentTime) * 0.25;
  requestAnimationFrame(tick);
}
window.addEventListener('scroll', onScroll, { passive: true });
requestAnimationFrame(tick);

关键：scroll 事件只更新目标值，真正的 currentTime 赋值放在 rAF 里做缓动，避免连续 seek 卡顿。

文案层

三段文案各自 position: fixed，按 reference.png 三栏骨架布局
opacity 由所在区间决定，transition: opacity 0.4s ease
同时只有一段处于 opacity:1

响应式

断点 ≤768px：左右两栏堆叠为单列；导航折叠为汉堡（或简化为只显示 logo + Join Us）；主标题用 clamp() 自适应
底部品牌行在移动端换行展示，分隔点保留

其他

页面初始 body { overflow-x: hidden }，纵向 scroll height 由一个 <div style="height:500vh"></div> spacer 撑开
字体预加载，避免 FOUT
不需要做加载进度条，但首屏前确保 scene1.png 已 decode（用 <link rel="preload"> 或 img.decode()）

六、输出

直接输出完整 index.html 单文件（含内联 CSS 与 JS，引用 Google Fonts CDN）。资产用相对路径引用，文件命名见【一】。不要输出说明文字，只要 HTML。