使用滚动效果，您可以为访问者滚动网页时创建动画。通过确定起点和终点来创建运动效果。
鼠标效果：使用鼠标效果，您可以为用户将鼠标悬停在特定元素上时创建转换。
在继续之前，让我们先了解一下交互可以在哪里使用。基本上，网页上的任何地方都可以使用。该功能在所有 SP Page Builder 插件中都可用。进入编辑模式后，选择一个插件，您会在“高级”选项卡旁边找到“交互”控件。
为了更好地理解的简短教程
我们知道，使用交互和动画有时仍然会很棘手，尤其是对于初学者来说。为了让您对交互和动画功能有更生动的了解，这里有一个示例，说明如何通过这个简单的演示实现简单的基于滚动的交互。
步骤 1：确定页面布局
首先，决定如何创建页面布局以及在哪里实现动画和交互。
对于此特定演示，我们将分为 3 个部分，其中我们将在第一部分和第三部分中添加动画，并在第二部分中使用交互。为了便于理解，我们将使用图像和文本块插件。
步骤 2：使用 SP Page Builder 创建新页面
现在继续创建一个新的 SP Page Builder 页面。为此，请从 Joomla 仪表板导航到组件并选择 SP Page Builder Pro。点击“开始”并创建一个新页面。
向您的页面添加行。首先，我们从列生成选项中选择 12 以添加完整的水平行。然后按 4+4+4 生成 3 个相等的列，最后再次选择 12 以添加完整的水平行。
使用 SP Page Builder 创建新页面
步骤 3：
让我们快速将插件添加到您刚刚添加的行和列中。为了进行简单的演示，我们使用了图像和文本块插件。
此时，您还可以通过更改填充、启用流体、向背景添加图像等来调整部分的外观。
单击每个添加的插件，用您选择的图像替换图像并添加您的图像。替换文本插件中的文本。更改后，我们的网页如下所示：
页面布局
步骤 4：向行添加动画
现在是时候向我们的第一行和最后一行添加一些动画来获得一些额外的效果了。
选择第一部分并从行编辑器转到行设置。启用动画选项。
为行添加动画
启用动画选项后，您应该能够看到可以在行上实现的所有内置动画。还提供了一些基本选项，可根据需要个性化动画。
方向：动画发生的方向。
持续时间：动画完成一个循环所需的时间。
延迟：动画发生的时间。
为了演示，我们将在我们的部分中添加淡入淡出动画。方向设置为向下，持续时间和延迟固定为 1200 毫秒。
为行添加动画
同样，我们设置上一节的参数，选择缩放动画，并将方向设置为缩放。持续时间和延迟均设置为 1000 毫秒。
您的动画部分已全部准备就绪！
步骤 5：是时候为你的图像插件添加交互了
一旦您根据布局获得了所有插件，并且您对此感到满意，那么是时候进入有趣的部分了！现在尝试调 立陶宛 电话号码数据 整您的交互设置。为此，请单击每个插件并转到常规设置以启用“滚动到视图时交互”。
为你的图片插件添加交互
现在选择第一张图片并转到常规设置以启用交互选项。启用该选项后，您可以看到默认情况下移动滚动操作添加到 0% 和 100%。此时间线区域表示可见的页面视口。页面底部表示 0%，页面中间表示 50%，页面顶部表示 100%。
让我们开始添加其余的滚动操作。单击“+”符号以选择并添加滚动操作。在 0% 时，我们将添加另外两个滚动操作 - 缩放和不透明度。
选择移动动作关键帧并将 y 轴设置为 -100。保持变换原点 X 轴和变换原点 Y 轴位于中心。
X 轴和 Y 轴分别控制插件的水平和垂直方向。这意味着对于 X 轴，如果为正值，则插件在向下滚动时水平向右移动，如果为负值， 则插件在向下滚动时水平向左移动。对于 Y 轴，如果为正值，则插件在向下滚动时垂直从下向上上升，如果为负值，则插件在向下滚动时垂直从上向下下降。
还有用于重新定位元素的 Z 轴。它控制 3D 空间中的 z 轴，指定元素将向内或向外移动多远。对于此特定演示，我们将 Z 轴值保持为 0。