WordPress divi主题

如何在 Divi 中为独特的文本设计制作字母动画

| 5月 13, 2022 | Divi主题使用教程 | 0 条评论

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

动画已成为现代网站用户体验的常见部分。 除了看起来很酷之外,它还可以添加微妙的交互元素,通过将内容带入生活来吸引用户。 Divi 的内置动画效果允许您使用不同的动画样式为页面上的任何元素设置动画。

google广告开户

在本教程中,我将向您展示如何在 Divi 中为一些独特的文本设计制作字母动画。 通过将单个字母放入文本模块,您可以使用不同的动画样式、持续时间和延迟来定位每个字母的动画,从而以创造性的方式使内容脱颖而出。 这种技术纯粹是出于设计目的,因为构成内容的字母对 seo 不是很友好。 但是,动画字母可让您以惊人的方式与用户分享您的故事。

让我们开始吧。

抢先看

在divi中动画字母

在divi中动画字母

在divi中动画字母

在divi中动画字母

在divi中动画字母

在divi中动画字母

免费下载字母动画设计示例布局

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

WordPress divi主题

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

让我们来看看教程好吗?

入门

对于本教程,您只需要 Divi。 我们将使用前端的 Divi 构建器从头开始构建设计。 首先,创建一个新页面,为页面命名,然后部署单击以使用 Divi Builder。 然后选择“从头开始构建”选项,点击在前端构建。

现在您可以开始设计了!

构建动画字母的布局

添加节、行和列

继续创建一个具有单列行的新常规部分。

在divi中动画字母

在我们开始添加我们的文本模块(将包含白色字母)之前,让我们为该部分添加一个深色背景图像。 打开部分设置并添加背景图像。 我正在使用来自投资公司登陆页面预制布局的抽象背景图像。

在divi中动画字母

使用文本模块创建单个字母块

在开始为字母添加动画之前,我们必须首先为要添加的每个字母创建一个单独的文本模块。 对于这个例子,我们将创建文本“Divi Design”。 由于这个文本短语包含 11 个字符空格(包括字母之间的空格,我们需要添加 11 个不同的文本模块。

继续并在列中添加一个文本模块。

fiverr建站WordPress程序员

在divi中动画字母

在内容框中,添加文本的第一个字母,在本例中为字母“d”。

在divi中动画字母

然后更新文本设计设置如下:

  • 文字字体:魔方
  • 文字字体样式:TT
  • 文字文字颜色:#ffffff
  • 文字文字大小:80px(桌面)、50px(平板电脑)、30px(手机)
  • 文字行高:1.6em
  • 文字方向:居中

在divi中动画字母

独立站选品工具

接下来在文本模块中添加一个动画,如下所示:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画时长:600ms
  • 动画延迟:100ms
  • 动画开始不透明度:100%

在divi中动画字母

复制文本模块并用字母“i”更新内容。 然后将动画延迟增加100ms如下:

在divi中动画字母

复制文本模块并用字母“v”更新内容。 然后将动画延迟增加到300ms。

高质量外链购买

在divi中动画字母

复制文本模块并用字母“i”更新内容。 然后将动画延迟增加到 400ms。

在divi中动画字母

对于下一个文本模块,我们要添加一个空格。 复制文本模块并将以下 html 添加到内容框中:

 

无需为此更新动画延迟。

JasperAI 10000字免费额度试用

然后复制文本模块并用字母“d”更新内容。 这是“设计”一词的第一个字母。 然后将动画延迟增加到500ms。

在divi中动画字母

继续复制文本模块的过程,并将剩余的每个拼出“设计”一词的字母的动画延迟增加 100 毫秒。

  • 字母“e”:动画延迟600ms
  • 字母“s”:动画延迟700ms
  • 字母“i”:动画延迟 800ms
  • 字母“g”:动画延迟 900ms
  • 字母“n”:动画延迟1000ms

这是到目前为止的设计。

在divi中动画字母

WordPress备份工具updrafplus

添加 Flex 属性以水平对齐模块

还不是我们正在寻找的结果。 但我们需要做的就是将设计神奇地拉到一起,将一小段 css 添加到行列中。 为此,请打开行设置并将以下自定义 CSS 添加到列主元素。

display: flex;

在divi中动画字母

display: flex 属性在一个灵活的表格中水平对齐所有模块,可以很好地适应不同的浏览器宽度。 并且由于这些模块位于一列中,因此该设计不会在平板电脑或移动设备上中断。

我们还需要添加自定义装订线宽度以取出字母下方的底部边距,并为该行添加一些顶部和底部填充,以便字母有一些动画空间。

  • 天沟宽度:1
  • 自定义填充:5vw 顶部,5vw 底部

在divi中动画字母

这是最终结果。

在divi中动画字母

添加不同的动画样式

通过此设置,您可以轻松添加新的动画样式以获得完全独特的效果。 为此,您可以利用 Divi 的多选功能一次更新所有模块。 在前端,按住 shift 并单击第一个和最后一个文本模块。 然后打开选定模块之一的设置。

在divi中动画字母

这将打开元素设置模式,允许您更新所有选定模块的设置。 我们不想改变动画延迟,因为我们想保持每个字母的级联效果。 但是,我们可以以不同的方式更新其他动画选项以创建完全独特的结果。

我建议在测试新动画之前复制该部分,以便您可以保留以前的示例。

这里有一些例子。

反向缩放文本动画

要为具有反向缩放效果的字母设置动画,请使用以下内容更新元素设置(所有模块的设置):

  • 动画风格:缩放
  • 动画方向:中心
  • 动画强度:200%

在divi中动画字母

这是最终结果。

在divi中动画字母

滚动波文本动画

要为具有滚动波浪效果的字母设置动画,请使用以下内容更新元素设置(所有模块的设置):

  • 动画风格:旋转
  • 动画方向:向上
  • 动画强度:100%

在divi中动画字母

这是最终结果。

在divi中动画字母

多米诺文字动画

要使用多米诺骨牌效果为文本设置动画,请使用以下内容更新元素设置(所有模块的设置):

  • 动画风格:翻转
  • 动画方向:左
  • 动画强度:100%

在divi中动画字母

这是最终结果。

在divi中动画字母

站立文字动画

要使用多米诺骨牌效果为文本设置动画,请使用以下内容更新元素设置(所有模块的设置):

  • 动画风格:折叠
  • 动画方向:向上
  • 动画强度:100%

在divi中动画字母

然后通过将以下 css 添加到行设置下的主列元素来添加透视图以创建 3d 设计元素。

主列元素 CSS:

perspective: 1000px;

在divi中动画字母

这是最终结果。

在divi中动画字母

使用动画方向的组合来动画字母

如果您想获得更多创意,您可以使用动画效果组合为字母设置动画。 对于此示例,我将结合使用动画方向和强度作为幻灯片样式。 这将给我们一个完全独特的展示。

这是如何做到的。

首先,复制我们之前构建的部分,以便我们可以在设计过程中抢占先机。

然后删除前 4 个文本模块,以便只显示文本“设计”。

在divi中动画字母

部分设置

接下来,由于我们希望动画中的一些字母在剖面视口之外开始,我们需要在剖面设置中添加一小段 css,如下所示:

overflow: hidden;

在divi中动画字母

这将隐藏字母,直到进入该部分。

行设置

现在,为了确保我们的文本模块(字母)保持居中,我们需要将以下 css 添加到行设置中:

display:flex;
justify-content: center;

在divi中动画字母

文本模块常用设置

使用多选,使用以下元素设置更新所有六个文本模块:

  • 自定义边距:左侧 3%,右侧 3%
  • 边框宽度:1px
  • 边框颜色:#ffffff

在divi中动画字母

  • 动画风格:幻灯片
  • 动画时长:2000ms
  • 动画延迟:100ms
  • 动画强度:300%

在divi中动画字母

这会处理所有文本模块共有的基本动画设置。 现在我们可以单独调整它们的动画设置。

文本模块个别设置

此时,我们可以通过调整各个文本模块设置来改变每个模块的动画方向,从而获得一些乐趣。 这将使我们能够以一种完全独特的方式为字母设置动画。 对于每个字母,更新动画方向和强度如下:

  • 字母 D
    动画方向:向上
  • 字母 E
    动画方向:向下
  • 字母 S
    动画方向:左
    动画强度:80%
  • 字母 I
    动画方向:右
    动画强度:80%
  • 字母 G
    动画方向:向下
  • 字母 N
    动画方向:向上

这是最终的设计。

在divi中动画字母

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

在divi中动画字母

在divi中动画字母

最后的想法

我认为可以肯定地说,一旦你有正确的设置,Divi 有很多方法可以为字母设置动画。 我不得不说,在构建这些示例时,很难停止使用动画设置。 有很多可能的变化可以尝试! 无论如何,我希望这能给你的下一个项目带来一点启发。 如果有的话,您可能想构建它只是为了好玩。

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

干杯!

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