你准备好学习视差滚动并创建一个 Apple Vision Pro 落地页克隆了吗？让我们马上开始。
概览
什么是视差滚动？
使用 ProtoPie 复刻 Apple Vision Pro 落地页
你需要准备的内容
技巧与窍门
用滚动动画打造首屏 Hero 区域
用视频幻灯片提升参与感
通过滚动控制播放增加沉浸感
使用 ProtoPie 轻松实现视差滚动
在 ProtoPie School 学习网页设计
什么是视差滚动？
自 2011 年问世以来，视差滚动一直是网页设计中的颠覆性技术，带来动态且沉浸式的用户体验。随着时间推移，它已成为当代网页设计的基础要素之一。
这种技术通过让背景比前景元素在用户滚动网页时移动得更慢，从而制造出纵深错觉。这不仅增强了视觉吸引力，也提升了用户参与度。它还能构建一种引人入胜的叙事方式：随着用户滚动浏览你想传达的大量信息，内容逐步展开，鼓励用户进一步探索。
使用 ProtoPie 复刻 Apple Vision Pro 的落地页
本文将深入网页设计，并提供可直接实践的技巧与方法。我们将指导你使用 ProtoPie 复刻先进的 Apple Vision Pro 落地页设计。鉴于 Apple 网站体量庞大，我们会聚焦于复现其核心风格所需的基础技术。
你需要准备的内容
在开始之前，先花一点时间准备好所需素材，为这次创意之旅做好准备。
实现顺滑滚动体验的技巧与窍门
有了 ProtoPie，你将更容易掌握视差设计中的细节，相比于使用其他设计工具会轻松很多。我们将整理一些实用技巧，帮助你迈向网页设计高手之路。很快，你就能像专业人士一样，在网页项目中打造顺滑且吸睛的滚动体验！
让我们开始吧。
用滚动动画打造首屏 Hero 区域
Apple Vision Pro 滚动动画。
Hero 区域是你网站的门面，这里我们有一段几乎覆盖整个屏幕的吸引人视频。当你开始滚动时，会发生一些精彩的过渡效果：
导航栏会部分隐藏
Apple Vision Pro 组件会优雅地淡出。
Hero 视频会平滑开始播放。
打开我们的 Starting Pie。定位到 “Hero” 场景。这里将作为我们制作这些吸睛 Hero 动画的区域。
你是否注意到，在 Vision Pro 落地页滚动时，各元素外观会微妙变化，但几乎没有明显的垂直位移？如果你观察浏览器中的滚动指示器，会发现进度条确实在移动，这说明滚动深度在变化。
我们的挑战是在 ProtoPie 中复现这种效果，同时让元素保持锚定不动。我们会带你使用一种技巧：创建一个虚拟滚动元素（dummy scroll）来控制滚动深度。同时，我们会利用滚动距离来精确指定元素如何随滚动进度变化。
创建一个名为 “Dummy Scroll” 的滚动容器。该滚动容器高度应与屏幕高度一致。宽度可自行决定。滚动方向选择垂直。
Apple Vision Pro 滚动效果。
在 “Dummy Scroll” 容器内，绘制一个名为 “Depth” 的矩形。矩形宽度与 “Dummy Scroll” 容器一致。高度设置为 2000 像素。
为虚拟滚动添加深度指示器。
现在，为了不让它可见，我们把 “Dummy Scroll” 容器移到场景外。
然后，开启其右侧触控区域，并让该触控区域覆盖整个屏幕。
触控区域。
最后，为了便于实时查看滚动距离，我们创建一个变量。
创建一个 “For This Scene” 变量
命名为 “scrollDistance”
在变量中直接使用公式，输入
`Dummy Scroll`.scrollOffset点击变量面板中的瓢虫图标开启调试模式
来预览一下。现在当我们滚动网站时，即使视觉上没有变化，也能看到变量在获取数值。这就是我们的滚动距离，我们会用它来驱动元素变化。
滚动距离预览。
现在让我们在开始滚动网站时做一些动画
给 “Dummy Scroll” 容器的 Scroll 属性添加一个 Range 触发器。
开始滚动后，滚动距离不再是 0。所以 Range 使用
Scroll of Dummy Scroll ≥ 1接下来，我们的目标是让导航栏上移、隐藏 logo，并启动视频播放。
给 “Nav” 容器添加 Move 响应，并移动到 Y = -44
给 “Hero copy” 容器添加 Opacity 响应，并降到 0。
给 “Hero Video” 添加 Playback 响应，并设置为 Play.
配置 Range 触发器。
当我们把页面滚动回顶部时，整个导航栏会重新显示。
给 “Dummy Scroll” 容器的 Scroll 属性再添加一个 Range 触发器。Range 设置为
Scroll of Dummy Scroll = 0要让导航栏恢复显示，只需给 “Nav” 容器添加一个 Reset 响应。
Reset 响应。
当继续向下滚动时，视频会逐渐缩小并略微变暗。
给 “Dummy Scroll” 容器的 Scroll 属性添加一个 Chain 触发器。
添加 Chain 触发器。
然后给 “Hero Video” 添加一个 Scale 响应。
当滚动距离从 0 到 976 像素时，视频缩放比例将从 100% 平滑过渡到 90%
Scale 响应。
再给 “Hero Video” 添加一个 Opacity 响应
当滚动距离从 512 到 976 像素时，我们将把视频不透明度从 100 逐步调整到 30
Opacity 响应。
做得很棒！现在你已经学会如何使用虚拟滚动技巧实现 Apple Vision 的 Hero 区域。我们还准备了一个 Quick Start 视频课程，帮助你进一步练习。去 ProtoPie School 看看吧。
用视频幻灯片提升参与感
视频幻灯片。
接下来，让我们进入视频幻灯片的部分，它位于吸睛的 Hero 区域下方。
在这个区域中，随着我们向下滚动，一系列视频会优雅地依次出现。每段视频都配有一句简短文案，并会随滚动动作同步出现与移动。
在我们的 starting pie 中，跳转到第二个场景 “Video Slideshows”。这里我们已经为你准备了几项内容。
“Dummy Scroll” 容器——与本文第一部分介绍的一样，它将作为你的滚动事件控制器。
名为 “scrollDistance” 的变量——用于显示实时滚动距离。
我们还准备了一些视觉资源。
“Text Area” 容器——其中有四个不同文本层，我们会让它们在每一页幻灯片中显示
“Video” 容器——其中包含我们将要使用的所有视频。
让我们先聚焦第一张幻灯片。
给 “Dummy Scroll” 容器的 Scroll 属性添加一个 Chain 触发器。
Chain 触发器。
给 “Text 1” 层（即第一张幻灯片的一行文案）应用 Move 响应。设定当滚动距离从 0 到 976 像素时，“Text 1” 从 Y=767 平滑移动到 0。
Move 响应。
给 “Text 1” 层添加 Opacity 响应，并加入以下详细动画：
当滚动距离在 0 到 50 像素时，将文本不透明度从 0 过渡到 100，确保文本层可见。
在 50 到 972 像素区间内，将文本不透明度保持为 100，确保其持续可见。
当达到 922 到 972 像素区间时，将文本不透明度从 100 逐步调整到 0，使文本层优雅淡出。
文本不透明度。
给 “Video Wrapper 1” 容器添加 Opacity 响应，并配置以下区间。
当滚动距离从 0 到 871 像素时，确保 Video Wrapper 的不透明度保持为 80。
当滚动距离从 871 到 972 像素时，将 Video Wrapper 的不透明度从 100 平滑过渡到 0，使其优雅淡出。
视频包装层不透明度。
预览第一张幻灯片的动画。
动画预览。
现在我们切换到第二张幻灯片。动画基本一致，只是由不同的滚动距离触发。我们可以复制第一张幻灯片的交互，再进行必要修改，以提高效率。
先复制目前的三个响应
然后修改关联对象。例如：
如果原响应关联的是 “Text 1”，改为 “Text 2”。
如果原响应关联的是 “Video Wrapper 1”，改为 “Video Wrapper 2”。
利用 ProtoPie 的时间轴功能提升效率。选中新建的三个响应并整体右移，让它们的起点精确对齐到第一组交互的终点。
将响应右移。
来预览一下。
第二张幻灯片预览。
在从幻灯片 2 向回滚到幻灯片 1 时会出现问题：第二个视频的不透明度没有重置为 0。
对于 “Video Wrapper 2” 上的 Opacity 响应，我们需要做一个小调整。
当前区间是——当滚动距离从 972 到 1894 像素时，Video Wrapper 保持不透明度 80。
将其改为
当滚动距离从 972 到 1022 像素时，将 Video Wrapper 不透明度从 0 调整到 100
当滚动距离从 1022 到 1894 像素时，确保 Video Wrapper 不透明度保持为 80。
包装层不透明度。
完成这个调整后，我们就可以通过复制响应、分配到新对象并适当调整时间轴，轻松把这些交互应用到后续幻灯片。
最后，我们需要根据滚动距离控制视频播放或重置。这可以通过 Range 触发器轻松实现。由于本文篇幅限制，我们不展开细节。下图可作为参考，帮助你准确设置各区间。
Range 触发器。
如果你是第一次接触 Range 触发器，我们在 ProtoPie School 有一节专门课程，会一步步教你如何基于滚动事件进行播放或暂停。欢迎查看，获得更全面指导与更深入理解。
你也许还会想知道如何制作可横向滚动的幻灯片。我们也准备好了。欢迎查看 ProtoPie School 的这个网页设计 Quick Start 课程！
通过滚动控制播放增加沉浸感
我们观察到 Apple 网站经常包含大量视频和图片资源，并巧妙地在用户滚动时触发。它不仅提升网站视觉吸引力，也能有效增强用户参与度。它还支持一种有说服力的叙事方式，让用户在互动中跟随内容脉络并吸收关键信息。
在最后一个示例中，我们将聚焦 Vision Pro 落地页中使用这项技术的那一部分。
滚动控制播放。
在我们的 starting pie 中，进入最后一个场景 ”Scroll to Playback”。
和前面的示例一样，我已经搭建好一些基础元素来快速开始——例如用来管理滚动事件的 “Dummy Scroll” 容器，以及用于监控实时滚动值的 “scrollDistance”。此外，我还设置了一组使用 Chain 触发器的交互，以便在滚动网站时平滑过渡元素。
这里我们唯一要做的，就是让视频随滚动播放。让我们开始实现这个功能。
首先，给 “Dummy Scroll” 容器添加一个 Chain 触发器，并选择它的 scroll 属性。
给 “Dummy Scroll” 添加 Chain 触发器。
然后给 “Video” 图层添加一个 **Playback **响应。动作选择 “Seek”。接着在其中使用公式：``Video
.totalTime/1650*(Dummy Scroll.scrollOffset-798)
Playback 响应。
`Video`.totalTime—— 获取视频资源的总时长。1650—— 该值可自定义，表示与目标视频行为关联的滚动深度区间。``Dummy Scroll.scrollOffset` 用于获取总滚动距离。
798—— 该值同样可调，表示滚动播放交互的起始点。具体来说，它意味着只有当我们从页面顶部滚动了 798 的距离后，才会触发滚动播放交互。为什么？因为在这个区块之前还有其他设计内容。
使用 ProtoPie 轻松实现视差滚动
在本教程接近尾声时，我们已经探讨了复现 Apple 网站吸引人用户体验的关键技术。完整复刻 Apple 网站是一个庞大工程，但我们讨论的这些基础方法是一个有力的起点。
欢迎在这些技术基础上继续拓展：尝试不同滚动触发器、探索更多交互，并微调行为以匹配你的具体项目需求。
在 ProtoPie School 学习网页设计
还有更多内容等你发现！如果你想深入了解并进一步探索网页设计技巧，务必查看我们完整的 ProtoPie School 网页设计系列。该系列涵盖众多主题，提供有价值的技巧、教程与灵感，帮助你提升网页设计技能。
保持热情，持续学习，在你的网页设计旅程中尽情释放创造力。祝你原型设计愉快！
