Dolomites 多层视差落地页案例
Category（分类）: Visualization Status: 已读
原链接：GSAP - demo project 本文为视觉案例收录。该链接页面标题为 Discover Dolomites，源码表明它由 Webflow 构建并使用 Webflow Interactions；收录时未发现 GSAP 脚本加载，因此不将其错误归因为 GSAP 案例。
一、案例概览
这是一个以多洛米蒂山脉旅游为主题的单页落地页。页面的视觉重点不在复杂业务功能，而在通过多层山景、滚动进入和图片区块编排，制造“进入山谷”的空间感。
可借鉴的模块包括：
- 首屏多层山景视差；
- 导航锚点与单页分段叙事；
- 三列服务卖点与逐项进入动画；
- 不规则拼贴式图片墙；
- 图文交错的旅行路线介绍；
- 大幅 CTA 背景图和联系表单。
二、首屏的多层视差结构
页面源码为首屏准备了背景、四层山景和顶层遮罩等独立图片层，类名可见 is-bg、is-1 至 is-4、is-hole。这种结构的关键不是“图片叠在一起”，而是：让不同景深的图层拥有不同的位移/缩放速度，从而在滚动中形成视差。
背景天空（最慢）
→ 远山
→ 中景山体
→ 近景山体
→ 前景遮罩 / 洞口（最快）
实现时，每一层都应是可独立控制的资源，而不是预先烘焙成一张完整大图。这样才能在不同断点重新排布、限制某一层的运动范围，并针对移动端替换尺寸更合适的素材。
三、响应式实现值得参考的点
该案例分别提供桌面端与移动端的视觉结构和图片资源，而非只把桌面首屏等比缩小。源码中能看到对应的移动层资源、srcset 多尺寸图片及懒加载标记。
可抽象为下面的原则：
| 问题 | 实践建议 |
|---|---|
| 景深在手机上失真 | 为移动端重新裁切/重排图层，不要只缩放桌面图 |
| 首屏资源太重 | 提供 srcset，避免移动端下载桌面原图 |
| 图片加载导致抖动 | 提前确定容器比例和尺寸，首屏关键资源审慎使用 eager |
| 长页面图片太多 | 非首屏图片 loading="lazy"，并压缩到合适格式/尺寸 |
| 视差影响阅读 | 在窄屏、低性能设备或减少动态效果偏好下弱化/关闭效果 |
四、如何把视觉案例转成自己的实现
- 先还原信息架构：首屏承诺、服务卖点、图片证据、路线/产品、CTA；不要先复制动效。
- 拆解视觉图层：列出每层资源、Z-index、锚点、移动方向与最大位移，先在静态布局中验证。
- 把动效限制在关键节点：首屏视差、模块首次进入、CTA 聚焦即可；滚动时让所有元素持续乱动会影响阅读。
- 使用真实内容做验收：长标题、不同语言、图片缺失、表单错误和弱网状态下，布局仍应成立。
- 测试输入与性能：移动端滚动、键盘导航、
prefers-reduced-motion、图片解码和长页面内存占用都应覆盖。
五、技术归属说明
收藏标题将该链接称为“GSAP demo project”，但链接当前页面源码显示生成器为 Webflow，动画标识主要为 data-w-id 等 Webflow Interactions 配置，未加载 gsap / greensock 脚本。它仍值得作为 多层视差 + 旅游落地页视觉叙事 的参考，但不能据此推导其 GSAP 实现细节。
整理者注
这个案例最值得学习的是“以景深组织信息”：用多层素材建立首屏记忆点，再用静态且可读的内容区承接转化。动效应服务于这种叙事，而不是掩盖内容本身。