WordPress divi主题

如何在 Divi 中添加向下滚动悬停效果以预览网页设计

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

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

无论是在作品集页面还是图片库中,网页设计师都需要向客户展示他们的设计,这是推动业务发展的关键部分。 而且,很多时候,他们的这些工作示例包括可能占用大量空间的整个网页设计的图像。 这就是为什么向这些图像添加向下滚动悬停效果可以使您的投资组合与众不同的原因。 这允许用户最初看到设计的紧凑部分。 但是当用户将鼠标悬停在图像上时,图像会滚动以缓慢显示设计的其余部分,就好像他们正在向下滚动网页一样。 您可以在我们自己的 Divi Layout Packs 页面上看到这种效果。

google广告开户

在本教程中,我将向您展示如何使用 Divi 为图像添加向下滚动悬停效果,以允许用户预览网页设计。 这是一个优雅的交互元素,我想你会喜欢的。

抢先看

这是我们将在本教程中一起构建的向下滚动悬停效果的预览。

divi向下滚动悬停效果

免费下载向下滚动悬停效果布局

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

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

现在让我们进入教程吧?

你需要什么开始

对于这个用例教程,我们将使用 Divi 从头开始​​构建我们的设计。 您还需要一些图像/屏幕截图用于投资组合项目。 我建议使用宽度至少为 1080 像素的图像。

创建三列行

如果您还没有,请创建一个新页面。 然后给你的页面一个标题,并在前端部署 Divi 构建器。 然后创建一个包含三列行的新部分。

divi向下滚动悬停效果

WordPress divi主题

更新行设置如下:

自定义宽度:100%
自定义填充(桌面):左侧 5%,右侧 5%
自定义填充(平板电脑):左侧 25%,右侧 25%
自定义填充(电话):左侧 15%,右侧 15%

接下来,我们需要将以下自定义 CSS 片段添加到每个列主要元素。 在高级选项卡下,添加以下 CSS:

第 1 列主要元素 CSS:

overflow: hidden;
height: 400px;

第 2 列主要元素 CSS:

overflow: hidden;
height: 400px;

第 3 列主要元素 CSS:

overflow: hidden;
height: 400px;

divi向下滚动悬停效果

注意每列的高度是 400px。 这最终将作为悬停时滚动的图像视口的高度。 “溢出:隐藏”属性将确保移动到列外(悬停时)的图像部分保持隐藏。 每当我们将变换悬停效果添加到图像时,这应该更有意义。

使用向下滚动悬停效果创建图像

现在我们准备开始使用向下滚动悬停效果创建我们的图像。 如果您了解效果的工作原理,这将非常简单。 基本上,我们要做的就是添加一个图像,然后使用 transform translate 属性在悬停时将图像向上移动 100%。 然后为了确保图像停在正确的位置,我们需要添加一个等于悬停时列的高度的上边距。 这将确保图像在图像底部可见的确切点停止滚动。

这是如何做到的。

fiverr建站WordPress程序员

将图像模块添加到列 1。然后添加以下悬停选项:

自定义边距(悬停):400px 顶部
变换平移 Y 轴(悬停):-100%

确保悬停时的自定义上边距等于上面自定义 CSS 中为您的列指定的高度。

此外,变换平移 Y 轴值是百分比 (-100%),而不是像素,因此您需要通过在变换平移控件的输入框中键入值来手动输入。

divi向下滚动悬停效果

独立站选品工具

向下滚动悬停效果如何工作

如果我用一些视觉插图来解释这个设置的功能可能会有所帮助。 假设您使用的图像的高度为 700 像素。 列高只有 400px。 这意味着默认情况下(悬停之前),该图像的底部溢出将被隐藏,因为它延伸到列之外。

divi向下滚动悬停效果

一旦用户将鼠标悬停在图像上,就会发生两件事。

首先,transform translate 属性以 -100% 的 Y 轴值向上移动图像。 换句话说,无论图像高度是多少(700px),图像都会向上移动 100%。

divi向下滚动悬停效果

高质量外链购买

接下来,图像被赋予 400px 的上边距,以将图像带回到列视口中,使其完美地位于底部。

divi向下滚动悬停效果

这与变换悬停效果同时发生,因此结果是平滑的滚动,以完美的位置结束。

这是实际示例中的结果。

divi向下滚动悬停效果

JasperAI 10000字免费额度试用

调整过渡持续时间和速度曲线

如您所知,过渡持续时间对于在悬停时预览图像来说太快了。 要减慢它的速度,您可以更新过渡持续时间。 您还可以调整速度曲线以在持续时间内更改速度。

更新以下内容:

转换持续时间:4000ms
过渡速度曲线:轻松

divi向下滚动悬停效果

通常,您会希望增加高度较大的图像的过渡持续时间,以便用户在悬停滚动效果发生时有时间处理图像。

WordPress备份工具updrafplus

将图像模块复制并粘贴到其余列中

现在您需要做的就是复制图像模块并将其粘贴到第 2 列和第 3 列。然后将每个图像更新为您想要的任何新图像。 就是这样!

divi向下滚动悬停效果

使用文本模块在每个图像上方添加标题

如果您想为每张图片添加标题,可以使用文本模块来完成。 但是,我们需要对文本模块和图像模块进行一些调整才能使其正常工作。

继续并在第 1 列的图像上方添加一个新的文本模块。您将更容易使用线框视图模式,因为您的列设置为列高。

divi向下滚动悬停效果

然后使用 h2 标题更新内容,如下所示:

<h2>Homepage</h2>

divi向下滚动悬停效果

然后更新设计设置如下:

背景颜色:#ffffff
文字方向:居中
标题 2 文字大小:20px
标题 2 行高:2em
自定义边距:0px 底部
自定义填充:10px 顶部
盒子阴影:见截图

divi向下滚动悬停效果

这些设置可能看起来很随意,但事实并非如此。 这些值可以预测文本模块的高度,这对于以后了解很重要。 例如,我知道文本模块的高度为 60px。 让我们算一下……

行高为 2em,是标题 2 文本大小 (20px) 的 2 倍。 这意味着我的行高将是 40px。

自定义顶部填充设置为 10 像素。 默认情况下,Divi 中的所有标题都存在 10px 的隐藏底部填充。 顶部和底部填充结合起来增加了 20 像素的高度。

所以…… 40px(行高)+ 20px(填充)= 60px

divi向下滚动悬停效果

现在我们知道了文本模块的高度。 当然,您始终可以使用开发工具检查元素以确保。

需要自定义底部边距 0px 才能取出模块下方存在的默认边距(由装订线宽度添加)。

由于悬停时图像与文本模块会有一些重叠,我们需要确保文本模块保持在图像上方。 我们可以通过给文本模块一个相对位置并改变 z-index 值来做到这一点,如下所示:

将以下自定义 CSS 添加到主元素:

position:relative;

然后更新 z 索引:

Z指数:3

divi向下滚动悬停效果

复制和粘贴文本模块

现在文本标题已经完成,我们可以将它复制并粘贴到第 2 列和第 3 列的图像上方(使用线框视图模式)。

divi向下滚动悬停效果

然后,您需要做的就是更新每个内容。

divi向下滚动悬停效果

为每个图像更新悬停时的上边距值以适应文本模块高度

目前,第 1、2 和 3 列中的每个图像在悬停时都有 400 像素的自定义上边距。 这被设置为等于列的自定义高度的高度。 但是,由于文本模块现在占用了一些列空间(高度为 60px),我们需要调整上边距悬停值。

为此,请使用多选功能选择所有三个图像。 然后更新元素设置如下:

自定义边距(悬停):340px 顶部

divi向下滚动悬停效果

现在,您的图像将在悬停状态结束时完全停在列的底部。

最后结果

这是设计的最终结果。

divi向下滚动悬停效果

随意复制该行并根据需要更新图像和标题文本以显示更多投资组合。

divi向下滚动悬停效果

这是平板电脑和手机上的样子。

divi向下滚动悬停效果

divi向下滚动悬停效果

最后的想法

使用自定义向下滚动悬停效果展示您的网页设计不仅增加了非常酷的交互,而且还节省了大量空间。 这使您可以在紧凑且对称的布局中显示大量图像。 这种功能通常是我们可以通过插件获得的。 但是,使用 Divi,您可以完全控制设计和功能,而无需添加其他插件。 我希望这能激发您为您的下一个项目创建漂亮的作品集画廊。

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

干杯!

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