传统约会 1.0

本文展示了 Engagements 的经典界面，您可以通过切换 Engagements 部分顶部的开关在 Architect 中启用该界面。要了解使用高级 Engagements 2.0 面板的最新方法，请参阅我们关于此主题的更新教程。

参与情况概述

互动元素为网站注入活力。借助 Webflow，您可以快速轻松地制作个性化互动元素，为元素添加动画、放大、旋转等效果。您还可以调整元素的宽度、高度、透明度或其显示特性。

参与框架

每个网站交互都由两个部分组成：触发器和阶段。触发器指示浏览器“何时”执行交互。阶段是触发器之后发生的视觉修改。

原因

开发互动时的主要设置是原因。根据互动的复杂程度，您可以有一个或几个原因。有了八个不同的原因类别，您的互动选项将无限。

您可以利用以下八个原因：

• 页面加载： 当网页完成加载时
• 点击： 当点击一个元素时
• 徘徊： 当光标经过某个元素时
• 滚动： 当元素滚动进入或离开视图时
• 标签： 当标签打开和/或关闭时
• 滑块： 当滑块进入或离开视图时
• 导航栏：导航菜单打开和/或关闭时
• 落下： 当下拉菜单打开和/或关闭时

原因设置

您可以使用以下配置来个性化您的事业：

• ‍影响其他元素： 将一个元素设置为影响其他元素的原因，并指定特定的 category
• 限制嵌套元素： 将父元素设置为触发器来影响子元素
• 限制为兄弟元素： 将同级元素设置为触发器来影响另一个同级元素
• 环形： 连续重复订婚

阶段

触发原因后，您的阶段将立即从最上层到最下层连续运行。您可以将多个阶段串联起来以生成令人惊叹的动画。

以下是您可以在 Webflow 中利用的阶段：

• ‍移动： 将元素移至页面上的新位置
• 规模： 放大或缩小元素
• 旋转： 旋转元素
• 宽度和高度： 调整元素的宽度和/或高度属性
• 不透明度： 增加或减少元素的透明度
• 展示： 改变元素的显示属性（例如，将内联改为无）
• 等待： 在阶段之间插入时间

初次陈述

元素的初始呈现方式定义了它在受到参与影响之前的外观。

配置元素的初始呈现使您可以在 Architect 中继续构建站点，并且仅当有人访问您发布的站点时才执行视觉修改。

制定约定

要使用约定 1.0 来制定约定：

1. 选择您想要参与的元素
2. 前往右侧的“参与”面板 (H)
3. 点击 + 符号

确定您的参与度

用描述性的方式命名您的订婚，以便您以后可以轻松找到它。以下是一些值得称赞的订婚标题：

• 页面加载时淡入徽标
• 徽标：页面加载时淡入
• 页面加载时：淡入徽标

如果您对标题不谨慎，您可能会很难找到合适的标题，覆盖其他约定，或无意中删除约定。

原因

原因定义了触发互动的用户操作。最常见的原因是点击和悬停，但 Webflow 提供了 8 种不同的原因。花点时间探索每一个原因，您将发现令人兴奋的新方法，让用户与您的网站互动。

要说明您的原因：

1. 点击 包括原因
2. 选择符合您要求的事业

阶段

阶段代表构成互动的视觉变化的各个阶段。它们以令人激动的方式向您展示如何通过视觉冲击力强的效果和动画丰富您网站的用户体验。

每个阶段从上到下自主运行，但单个阶段中的每个属性改变都是同时发生的。

激活负载接合 1.0

加载触发器将在页面加载时启动您的互动。因此，建议仅将加载触发器应用于页面加载时可见的元素（例如，页面顶部的显眼图像）。

创建同步加载效果

加载触发器的一个常见场景是分配各种元素交互的时间，以便它们以不同的间隔进入页面。这就是我们所说的创建同步加载参与（请注意上面的例子）。

为了实现这一点，您必须在任何动画发生之前引入等待阶段，从而错开每个触发器发生的时间。利用等待阶段，您可以整合一个特定的时间段，在此期间不会发生任何动画。为了产生同步效果，只需按照您希望它们出现的顺序依次延长每个元素的等待时间即可。

负载触发交互的最佳实践

使用加载触发器时，考虑要附加交互的元素的位置至关重要。由于加载触发器在页面加载时激活，因此建议将其应用于位于页面顶部的元素，以确保用户见证交互。

如果将加载触发器附加到页面下部的元素，用户可能会错过交互事件（因为它在监视器的视点之下展开）。

滚动参与度 1.0

滚动触发的互动是您在上下滚动网站时展开的互动。通过此互动，您可以定制“进入视图”和“离开视图”状态，并为每种状态集成个性化效果。指定偏移量的选项还使您能够灵活地确定滚动触发动画发生的屏幕上的位置。

进入视野和离开视野

处理滚动触发器时，您可以在对象进入视图时和对象退出视图时引入效果。要适当关联触发器位置，您必须为顶部和/或底部附加偏移量。

进入视野

“进入视图”功能允许您在滚动页面时对象变得明显时加入一种效果（或一系列效果）。将此视为您正在为其实施滚动交互的元素的主要影响。

看不见

您可以使用 Unseen 属性将动画合并到元素中，当它们移出视线时（即用户在向下滚动页面时经过它们之后）。从上面的偏移开始会很有帮助。

偏移

降低保证金

对于外观，您可以选择下边距，表示与 底部 您希望对象执行其滚动交互的页面。

上缘

对于未见，您可以选择上边距，即距离 顶部 您希望对象显示其效果的位置。一旦用户完全滚动过了对象，此处使用的相同边距百分比将作为用户向上滚动时默认的“视野外”偏移值。

需要注意的事项 – 移动设备上禁止滚动（仅限 iOS）

看来我们的滚动功能无法在某些移动设备上运行。这是 iOS（iPhone、iPad、iPod）独有的限制。即使是最新的设备，Apple 也不会授予开发人员在浏览器移动时执行脚本的权限。有关更多详细信息，请参阅 苹果开发者库。一旦 Apple 允许开发人员使用此功能，我们将很乐意重新引入滚动功能！

点击启动交互1.0

点击启动允许您在有人点击按钮、链接或其他交互元素时引入交互。 

配置点击交互时，您可以为第一次点击和后续点击指定各种效果。

常见情况

通常，点击交互用于影响页面上的另一个元素。在上面的示例中，交互实际上应用于按钮，而不是隐藏的文本区域。按钮只是采用了一种影响页面上不同元素（例如隐藏文本框）的交互。

利用第二次点击

第二次点击通常会逆转第一次点击的影响，起到切换的作用。可以将其视为打开一个框（第一次点击），然后关闭该框（第二次点击）。 

悬停启动交互 1.0

悬停启动交互允许您定义将鼠标悬停在元素上并将光标移开时的不同效果。

典型使用场景

• 将鼠标悬停在按钮上时显示图标
• 当鼠标悬停在按钮上时，动画图标
• 当光标悬停在图像上时显示有关图像的信息

选项卡启动交互 1.0

选项卡交互使您能够在选项卡打开（选择）和关闭（取消选择）时包含由选项卡触发的交互。 

这提供了一系列创意和交互可能性，不仅可以在选项卡链接上实现，还可以在页面的其他元素上实现。这是一个包含多个交互的选项卡组件示例。

整合与标签链接的交互

选项卡链接可作为在各个选项卡窗格（即选项卡内的内容）之间切换的触发器。当用户单击选项卡链接然后单击离开时，实现交互可以产生独特的效果。

探索下面的示例并按照步骤复制它们。

阶段1

首先，我们需要相应地设计选项卡并引入箭头图标。上面的选项卡链接通过调整以下样式属性来设置样式：

• ‍宽度： 这些标签链接的宽度已更改为 23%
• 右边距： 为了留出标签两侧的间距，在标签链接的右侧留出了 2% 的边距。
• 增加填充： 顶部和底部的默认填充被修改为各 13px。
• 填色： 填充颜色被改为浅灰色（#c0ccd1），而当前选项卡链接的填充颜色被指定为蓝色（#3496de）。
• 我们还为箭头图标分配了一个类，并实现了以下 CSS 属性。
• 位置： 为了将图标定位在标签链接的底部，我们将位置调整为绝对。使用绝对位置工具，我们将其定位在底部。
• 保证金自动： 为了使图标居中，我们将左右边距都设置为自动。

阶段2

接下来是集成交互！首先单击选项卡链接（非当前选项卡链接），然后导航到交互 1.0 面板。在这里，您将建立一个新的交互。

第三阶段

初始外观应留空，因此后续步骤是指定触发器。这里，选择选项卡触发器。

第四阶段

要执行交互，请复制下图中显示的内容。请注意，标签打开（通过单击标签触发）和标签关闭（通过单击其他标签触发）都有两种交互。总结一下！

第五阶段

现在，为箭头图标设置一个独特的交互。只需单击箭头图标并再次执行步骤 2。这次，您将在此交互中包含初始外观。对于这种情况，选择将箭头图标向上移动 6px 并设置不透明度为 0%。

第六阶段

重复步骤 3 并选择选项卡触发器。箭头图标交互的其余步骤将依次进行。您已完成！确保将交互与所有选项卡链接和箭头图标集成。

滑块启动交互 1.0

滑块交互使您能够将动画合并到滑块容器内的元素上。 

导航栏启动交互 1.0

导航栏交互使您能够在导航组件内的元素上包含交互。

‍

这篇文章展示了以前的交互界面，您可以在设计器中通过使用交互面板顶部的开关来激活它。要查看使用新交互 2.0 面板的相关文章，请参阅我们关于此主题的更新课程。