在本教程中，我们将探讨如何使用 Framer 创建一个炫酷的滚动效果。这个效果在 Framer 社区中一直备受追捧，并且在 Apple 等热门网站上也能看到。该效果在 Apple TV Plus 页面上表现最佳，其中一个部分在您滚动时会缩小并变成幻灯片。

设置演示

在本教程中，我设置了一个类似的演示效果，使用视频而不是图片。当您向下滚动时，视频会缩小并变成幻灯片。当缩放结束时，它会继续滚动到下一部分。您还可以点击幻灯片中的下一个项目，然后向上滚动以放大视频。

Framer 入门

首先，打开您的 Framer 项目并创建一个大型滚动部分。在此示例中，我将部分高度设置为 2800 像素，但您可以根据自己的喜好进行调整。此部分的高度决定了您需要向下滚动多远才能缩放视频。

接下来，在滚动部分内再绘制一个框架，并将其尺寸设置为 100% 宽度和 100 视口高度 (100VH)。将此框架重命名为“slideshow container”并将其位置设置为 Sticky。这将使该部分在您向下滚动整个页面时保持在顶部。为框架启用布局，将所有内容保留为默认设置。

添加幻灯片

现在，通过从插入菜单的交互部分拖动幻灯片，将其添加到项目中。将幻灯片设置为 100% 高度，宽度约为 1900 像素，以匹配视频的纵横比。锁定纵横比，以便幻灯片按比例缩放。不要忘记添加一个 110% 的最小宽度，以确保视频始终占据屏幕的整个宽度。

使用多针连接器将您的视频添加到幻灯片中。现在是时候添加滚动变换效果了。选中幻灯片后，转到属性面板中的效果并选择滚动变换。根据“可见部分”进行设置并选择视频部分。

调整幻灯片属性

根据您的喜好调整幻灯片属性。例如，您可以将间隔设置为五秒，以确保视频在过渡到下一个视频之前在屏幕上停留更长时间。禁用幻灯片底部的点，因为在本示例中不需要它们。将幻灯片项目之间的间距增加到大约 50 像素，并放大箭头大小以便于导航。

通过在剪裁设置中将溢出属性设置为“显示”，确保其他视频可见。您还可以为文本图层添加滚动变换，使其在用户向下滚动时淡出。

添加跑马灯组件

最后，通过从插入菜单的交互部分添加跑马灯组件来改善下一部分的外观。复制跑马灯以创建三行并将它们连接到图像。调整间距和速度设置，并为每行设置不同的滚动方向。

最终结果

现在您拥有一个平滑的滚动效果，它在您滚动时缩小并转换为幻灯片。最终结果应该类似于 Apple 网站上的效果。