WordPress divi主题

如何在 Divi 中结合动画和视差以获得独特的设计

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

无论我们是准备一顿饭还是设计一个网站,单靠食材并不能保证一道美味的菜肴或一个漂亮的网站。 正是我们将这些元素组合在一起的程度如何,才使一切变得不同。 在本教程中,我将向您展示如何以您可能从未考虑过的方式结合动画和图像视差。 如果您还不知道,动画是一个内置的 Divi 功能,可以在页面加载时添加到任何 Divi 元素。 视差也是一个 Divi 选项,可让您在滚动时为背景图像添加独特的运动。

google广告开户

今天,我们将使用 Divi 的内置设计设置,以各种创造性的方式将动画和视差结合起来。 这种组合非常神奇地结合在一起,创建了一个漂亮的动画视差图像布局,当你向下滚动页面时,它看起来很棒。

让我们开始吧!

抢先看

动画和视差

动画和视差

动画和视差

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗?

你需要什么开始

要开始,您需要具备以下条件:

WordPress divi主题
  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像。 您可以在 Life Coach Divi Layout Pack 中找到用于本教程的图像。

之后,您将有一个空白画布开始在 Divi 中进行设计。

基本理念

这个设计概念背后的基本思想是在背景图像上使用 CSS 视差。 由于 CSS 视差的工作方式,视差图像将保持固定并自动填充浏览器窗口,无论使用它的元素的大小如何。 图像的固定性质允许您在 Divi 中的多个元素上使用相同的视差图像,然后使用动画移动这些元素。 当动画稳定下来时,使用的视差背景图像将匹配并在向下滚动页面时按预期工作。

动画和视差

第 1 部分:创建 Divi 动画和视差设计(版本 1)

创建一个具有两列 (1/2 1/2) 行的新部分。

动画和视差

在我们添加我们的模块之前,让我们对部分和行进行一些调整。

更新节和行设置

首先,打开section settings,取出默认padding如下:

内边距:0px 顶部,0px 底部

动画和视差

然后打开行设置并给行一个视差背景图像。

fiverr建站WordPress程序员

背景图片: [upload image]
使用视差效果:是
视差方法:CSS

此处必须将视差方法设置为 CSS 才能使设计生效。

宽度:100%
最大宽度:100%
填充:10vw 顶部,10vw 左侧,10vw 右侧

动画和视差

添加具有匹配视差背景的文本模块

现在我们准备开始将我们的文本模块添加到设计中。 第一个文本模块是这个设计的关键。 通过将完全相同的背景图像和 css 视差应用到文本模块,我们可以通过动画获得完全独特的效果。

独立站选品工具

继续并在第 1 列中添加一个新的文本模块。

动画和视差

然后更新文本模块设置如下:

正文内容:

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

动画和视差

高质量外链购买

然后为文本模块提供与您添加到行中相同的 css 视差背景图像。

背景图片: [upload image]
使用视差效果:是
视差方法:CSS

动画和视差

文字字体:Fira Sans
文字字体粗细:轻
文字文字颜色:#ffffff
文字文字大小:70px
文本行高:1em

动画和视差

JasperAI 10000字免费额度试用

链接字体样式:下划线 (U)
链接文本颜色:#ffffff(默认)、#881e67(悬停)
链接文字大小:30px
链接字母间距:2px

动画和视差

填充:顶部 20%,底部 20%,左侧 10%,右侧 10%

边框宽度:20px
边框颜色:#ffffff

动画和视差

WordPress备份工具updrafplus

然后在文本模块中添加以下动画:

动画风格:幻灯片
动画方向:右
动画时长:1500ms
动画强度:80%
动画开始不透明度:20%

动画和视差

让我们看看到目前为止的效果……

动画和视差

注意动画文本模块的背景图像是如何停留在行背景的匹配位置上的。 这是因为它们都共享具有 css 视差效果的相同背景图像。

添加具有真实视差背景图像的第二个文本模块

此时我们已准备好添加下一个文本模块。 下一个将使用真正的视差效果具有不同的背景图像。 我们也会给它一些动画。

将新的文本模块添加到第 2 列。

动画和视差

然后用“我的博客”这个词更新正文内容。

动画和视差

然后使用真正的视差方法添加背景图像。

背景图片: [upload image]
使用视差效果:是
视差方法:真实视差

动画和视差

文字字体:Fira Mono
文字字体样式:TT
文字文字对齐:居中
文字文字颜色:#ffffff
文字字母间距:10px
宽度:320 像素
最大宽度:320px
模块对齐:中心

动画和视差

边距:(桌面):-5vw 顶部,4vw 底部
保证金(平板电脑和手机):3vw top
内边距:顶部 70 像素,底部 70 像素

动画和视差

边框宽度:20px
边框颜色:#ffffff

动画风格:幻灯片
动画方向:向下
动画延迟:200ms

动画和视差

使用新的视差背景图像创建第三个文本模块

要创建第三个文本模块,请复制您刚刚在第 2 列中创建的文本模块。

动画和视差

然后我们将保持背景图像相同,但我们将使用 CSS 视差方法更新视差效果。

动画和视差

宽度:240 像素
最大宽度:240px
模块对齐:左
边距:0px 底部
内边距:顶部 170 像素,底部 170 像素,左侧 95 像素,右侧 95 像素

自定义宽度和左右填充用于创建垂直文本显示,与较长的模块设计相得益彰。

动画和视差

然后将动画方向更新为向上而不是向下。

动画方向:UP

动画和视差

最后结果

现在让我们看看最终结果。

动画和视差

第 2 部分:创建动画和视差设计(版本 2)

下一个设计将通过在模块的初始动画之后加载行的视差背景图像来添加独特的动画。 为此,我们需要为将在内容后面移动的 CSS 视差背景图像严格使用单独的行。 而且由于我们将首先暴露我们的部分背景,因此我们可以在行动画之前为我们的内容添加自定义背景颜色。

这是如何做到的。

首先,部署线框视图模式。 然后复制包含您的文本模块的行。 现在您将有两个相同的行。 接下来,删除顶行内的文本模块。 我们真正想做的就是在我们的顶排设计上抢占先机。

动画和视差

接下来,更新顶行的设置,如下所示:

高度:900px(桌面),2000px(平板电脑和手机)
内边距:0px 顶部,0px 底部

动画风格:幻灯片
动画方向:右
动画时长:1250ms
动画延迟:1800ms

动画和视差

我们给行设置了高度,因为默认情况下空行没有任何高度。 因此,您需要确保该行的高度足以用内容覆盖第二行的内容。 我们还为该行提供了一个带有延迟的动画,以便在文本模块出现后它会滑到内容后面。

重叠两行

现在我们所要做的就是使用负边距将底行向上移动,以便它与我们的背景动画重叠顶行。

打开底行的设置并更新边距,如下所示:

边距:-900px 顶部(桌面),-2000px(平板电脑和手机)

动画和视差

然后使用 css 视差方法取出该行的背景图像,因为我们将使用顶行背景图像。

动画和视差

这是到目前为止的设计。 请注意第一行中延迟的背景动画以及第 1 列中文本模块的视差背景如何与它完美匹配。

添加部分背景颜色

要在行动画之前为文本模块提供初始背景颜色,您可以为该部分提供背景颜色。

打开部分设置并添加以下内容:

背景渐变左颜色:rgba(136,30,103,0.61)
背景渐变右颜色:#881e67
渐变类型:径向

动画和视差

最后结果

现在让我们看看最终结果。

动画和视差

可选的混合模式和动画组合

您还可以通过在第二行添加混合模式并添加与模块动画协同工作的缩放动画来获得更多创意。

混合模式:亮度
动画风格:缩放

动画和视差

这是最终结果。

动画和视差

这是它在移动设备上的外观。

动画和视差

最后的想法

我希望您在我们探索结合动画和视差图像的一些独特方法时学到了一些东西。 结果绝对是独一无二的,我相信您可以轻松调整此设置以构建无数其他组合,这些组合在您的下一个项目中看起来很棒。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题