返回赛题列表
滚动叙事页面
挑战500vh 高度的滚动叙事页面：滚动驱动一系列复杂的视差、缩放、颜色反转和路径绘制，最终碎片在屏幕中央拼成"End"。
规则说明▼
单phase挑战。直接给出完整的视觉叙事和技术要求，考察模型对滚动叙事（Scrollytelling）的整体编排能力。
Prompt▼
Prompt▼
设计一个**滚动叙事网页（Scrollytelling）**。
**核心规则：**
- 整个页面高度为 **500vh**（5 屏）
- 用户**唯一的交互方式是滚动**——不是传统的"页面随滚动条向下移动"，而是滚动驱动一连串视觉动画
- 当用户滚动到**最底部**时，所有散落各处的几何碎片应当**精准地在屏幕中央拼成一个完整的"End"字样**
**滚动驱动的视觉演出（建议至少 5 段）：**
1. 0~20%：开场——一个标题 / 关键句逐字浮现 / 错位排版定格
2. 20~40%：视差层叠 —— 多层背景以不同速度移动，营造空间纵深
3. 40~60%：色彩反转或主题切换 —— 整体视觉氛围发生戏剧性变化
4. 60~80%：几何元素飞入 —— 多个抽象碎片从不同方向飞入画面，互相穿插
5. 80~100%：碎片汇聚 —— 所有碎片精准地、缓慢地拼成"End"字样
每一段切换之间应有平滑过渡，整段叙事节奏要像一支短片。
**技术要求：**
- 输出一个完整的单文件 HTML，所有 CSS 和 JS 内联
- 推荐使用 GSAP + ScrollTrigger（CDN 引入）做滚动驱动动画
- 也可以使用原生 IntersectionObserver / `getBoundingClientRect` 自己计算滚动进度
- 也鼓励使用路径绘制（SVG path drawing on scroll）、文字描边动画、几何形态变换
- 滚动到底部后"End"必须在屏幕**完美居中**，碎片落位精准
- 简体中文，要有良好的视觉一致性
- 双击打开就能滚一遍，再滚一遍，每次都丝滑
使用反引号包裹HTML代码输出。