我们大多数人在浏览网页时都不会多想。但对于设计师来说，这种基本直观的行为是一种叙事工具，可以讲述更具沉浸感的故事。视差是一种创建层次、维度或改变节奏的技术。你可以利用它来引导访客的注意力，关注重要信息、产品功能、行动号召或互动故事中的关键情节。

继续阅读，了解更多关于视差以及设计师如何利用它实现各种效果。

什么是视差滚动？

视差是一种技术，用于为图像的不同部分分配不同的运动速率。当用户使用鼠标或触控板滚动时，网站的代码会指示各种元素以不同的速度移动。通常，当用户滚动时，背景图像的移动速度会比前景中的视觉元素慢一些，从而营造出一种深度感。

在现实世界中思考一下：例如，如果你从车窗向外看，离你最近的栅栏和栏杆会快速移动，速度越快越模糊，而背景中的东西，如房屋、建筑物和山脉，则移动得慢得多。早期的动画片就是利用这种方式欺骗我们的眼睛，让我们相信二维图像具有深度。

在网站的语境中，视差不仅仅指运动视觉效果。设计师可以将用户的滚动与设计元素的变化联系起来，触发动画、徽标移动、图像缩放等。例如，当用户滚动时使图像变大，可以吸引眼球，让他们更关注该图像传达的信息。将所有这些类型的滚动触发的变化以小增量有意地分层，可以比静态视觉或文本更有效地讲述更强大的故事、突出产品的细节，甚至显示复杂的信息。

同时，过度使用巨大的图像和大型滚动脚本会减慢页面速度，并降低用户体验。

如何创建视差滚动效果

你可能会使用视觉设计工具来创建这种效果，尽管一些设计师更喜欢自己编写代码。无论哪种方式，结果都是一样的。

自己编写代码

层叠样式表（CSS）是一种用于网站的布局和样式编码语言，允许你自行编写代码。你可以将图像放在背景中，然后将前景设置为滚动。这样，结果会感觉前景层比其他层更接近。简单的 CSS 视差网站代码可能如下所示：

.parallax {

  background-image: url('background.jpg');

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

还有 JavaScript 选项可以用来创建视差效果，从简单到更复杂，你可以用它们来管理更复杂的视差滚动效果，以及可以合并的动画库。这些可以帮助控制滚动位置映射或对象的不透明度、缩放甚至旋转等事情。

在 Framer 中进行可视化构建

Framer 的内置工具让你无需编写代码即可直接在网站画布上创建视差效果。图层——包括标题、图像或背景面板——都可以以不同的速度移动。你甚至可以将用户滚动行为与视觉变换联系起来，例如图像淡入淡出、徽标缩小或图标倾斜。所有这些都可以在可视化工作而非代码中完成，让你专注于运动的感觉，而不是实现它的具体代码语法。

10 个视差滚动示例

探索这些示例，获取灵感，将视差滚动融入你自己的网站中：

1. The tinyPod

来源：thetinypod.com

tinyPod 网站展示了视差滚动如何创造沉浸式体验。它旨在展示将无表带的 Apple Watch 转化为一个像 iPod 的极简手机的创新。视差滚动以动态迷人的方式展示产品的360度视图，让你能从各个角度探索。

在页面中途，当微型Pod翻转时，有一个滚动驱动的时刻，一只手伸进来握住它，与口号“你所需的一切尽在掌中”相匹配。这个序列就像一个故事节奏：翻转揭示了一个新的角度，手将其置于使用场景中，它们共同暗示着更多内容即将到来。这种期待感会促使你向下滚动页面以查看下一个揭示。

2. Mars Rejects

来源：marsrejects.com

Mars Rejects是10,000个独特角色的集合，以NFT的形式呈现。网站的英雄区具有一个令人惊叹的横向移动图形。当你向下滚动时，图形会稍微向前移动，背景变为大胆的红色，并且英雄文本居中。

视差效果在叙事部分也得到了巧妙运用。当你浏览 Mars Rejects 网站时，故事卡片会漂浮到屏幕上，而它们后面的艺术品则会移动并堆叠新的细节。每一次滚动都会增加一层，因此场景感觉像是实时展开，你一步步揭示了叙事。

3. Unifiers of Japan

来源：unifiersofjapan.framer.website

在Tofu Design Co. 关于日本战国-江户时代的教育网站上，视差是16世纪历史人物织田信长故事背后的引擎。英雄图片并非一动不动；当你滚动时，它会移动并分层，直到织田变成一个完整的武士，几乎就像相机拉近一样。背景运动使页面具有电影感，而无需任何点击或滚动之外的努力。

滋贺地图从文本后面向前漂移，故事卡片在你经过时向上升起。悬停状态和手风琴给你点击的时刻，但正是视差将一切连接起来。滚动帮助你观看场景的展开。

4. Punkt

来源：punkt.co

Punkt 的主页以一个倾斜和逐渐消失的信封开场，就像一张被丢弃的便条。这暗示了主题：堆积如山的通信以及理清它的必要性。然后是空虚；“混沌”一词以巨大的字体填满屏幕，一根缠结的线穿过画面，页面感觉既凌乱又空旷。

继续滚动，这种空虚开始被填满。文案和视觉效果同步呈现，展示了该平台如何从混乱中理出秩序。视差使这种转变感觉就像故事本身的一部分：先有问题，然后随着页面向下移动而揭示解决方案。

5. Disco Dungeon

来源：discodungeongame.com

从一开始，Disco Dungeon 网站的英雄区就以游戏主角在半空中漂浮的引人注目的画面吸引了你的注意力。当你向下滚动时，角色平稳下降，仿佛深入地牢探索，与游戏主题完美契合。

视差滚动增加了深度，但也将背景变成了故事的一部分。地牢的墙壁从切口中显现出来，并随着你的移动而保持存在，让你感觉总有更多内容触手可及之外。这种张力——渴望深入屏幕看到更多世界——是视差滚动可以创造的。它将简单的滚动转化为游戏玩法的瞥见。

6. Cancel Culture

来源：cancelculture.framer.website

Ariella Delin & Visar Maxhuni 的Cancel Culture 网站展示了视差滚动如何增强文字驱动的内容。一旦你点击一个具体的例子并浏览网站，关于被“取消”研究对象的关键内容会进入焦点，而背景文本（包含社交媒体评论和后果）则微妙地移入视野。这种动态分层之所以有效，是因为它呼应了评论串动态的感受，判断堆积如山，反应不断涌入，当你滚动时，压力也随之增加。视差让这些声音感觉像是实时累积，从而加剧了利害关系，并让你更深入地沉浸到故事中。

7. i-D

来源：i-d.co

i-D使用视差作为节奏工具，赋予其图片驱动的页面以杂志版面的缓慢节奏。当你滚动时，大图和标题以略微不同的速度移动，这为时尚和文化故事的动态呈现增加了一些深度。这是一种轻柔的触感——更多的是唤起屏幕上印刷杂志的感觉，而不是炫目的动画——但它有助于图像传达品牌的声音，而无需太多文本。

8. FLITE

来源：flite.bike

自行车数字硬件品牌FLITE在从顶部向下滚动时，使用视差效果创建一个沉浸式视觉模块。图像会完全铺满，产品的图像尺寸也会增加，将你吸引进去，让你感觉仿佛置身于自行车上，低头看着车把。效果微妙而富有启发性。

9. Fusion 模板

来源：Fusion preview

Framer 的“Fusion”模板允许应用开发者使用视差效果在移动设备中展示各种屏幕。当用户向下滚动页面时，设备外壳会冻结在原地，而内部内容和旁边的描述性文字则会翻转。滚动还会触发设备本身的微妙移动——它会轻微倾斜。设备吸引了访问者的目光，而内容和文字则讲述了一个功能优势的故事。

10. Archar 模板

来源：Archar preview

Framer 的“Archar”模板专为作品集网站设计，让创意人士能够以视觉上引人入胜的方式讲述他们的职业生涯和作品。大字体的文本固定在原位，阐述主题的观点，而视觉元素在其下方滑动。这些元素共同创造了一个动态的、展示创意专业知识的汇报演示。

在 Framer 中创建视差效果的5个技巧

视差滚动可能会让人感到有些望而生畏，尤其是如果编码不是你的强项的话。但有了 Framer，它会变得轻而易举——你只需点击几下就能创建那些引人注目的效果。

以下是一些帮助你在 Framer 中完美实现视差滚动的技巧，让你的设计既美观又流畅：

理解图层和运动

Framer 中视差滚动的基础涉及��理图层和控制它们的运动。首先，用多个图层设置你的设计，每个图层代表不同的元素，如背景、中景和前景。

在 Framer 中，你可以以不同的速度为这些图层设置动画，以在用户滚动时创建深度的错觉。请记住，关键在于微妙——过多的运动会使用户不知所措。

使用滚动触发器

Framer 最强大的功能之一是创建滚动触发动画的能力。这意味着你可以设置特定的动作，当用户滚动到你页面的某个部分时发生。

例如，你可以设置当用户向下滚动时，图层向上移动，或者在元素进入视野时逐渐显示它们。这项技术对于实现引人入胜的视差效果至关重要。

调整速度和缓动

为了获得流畅精致的视差效果，请注意动画的速度和缓动。

Framer 允许你微调这些方面，确保你的元素以一种自然且视觉吸引力的方式移动。通常，背景层比前景层移动得慢，从而增强了使视差滚动如此迷人的 3D 效果。

融入互动元素

通过整合响应用户操作的交互元素，增强视差滚动的冲击力。

例如，你可以创建悬停效果来触发额外的动画，或者添加可点击区域，当用户与页面互动时显示更多内容。这不仅使你的设计更具动态性，而且通过鼓励用户探索来保持他们的参与。

跨设备测试

视差效果在不同设备上的表现可能有所不同，尤其是在桌面端和移动端之间。

Framer 提供了工具来预览和调整你的设计以适应不同的屏幕尺寸，确保一致的用户体验。考虑为移动用户简化或调整视差效果，因为在移动设备上性能和可用性至关重要。

利用视差效果让你的网站脱颖而出

视差效果是为你的网站增加深度和动态感的强大方式，使其更令人难忘且富有影响力。使用 Framer，你无需编写代码即可创建这些效果。

从 Framer 的网站模板市场开始，其中包含滚动动画和视差功能。在构建过程中，你可以调整每层的滚动速度，以微调深度和运动。要更进一步，使用滚动变换来动画化缩放、不透明度或旋转，并随滚动进度进行。

使用 Framer，你不仅可以设计一个漂亮的网站，还可以为访客创造一个互动沉浸式的体验。