177
在临猗企业网站建设上一篇文章中,我们构建了动画演示页面的第6部分。我向您展示了如何设计一个布局来显示带有明亮颜色、发光阴影和精确动画的产品下载。
今天,我们将建立我们的动画演示页面的第7节,这是一个完美的例子,如何使用滚动动画效果,以添加生活类运动到您的内容。最终产品将给人留下文字和手机从不同角度滑动和旋转的印象,当你向下滚动页面。
这是我最喜欢的动画之一。我们开始吧。
设计要素的准备
本教程需要三张图片。前两幅图像的垂直方向应为580×950左右,以10%的逆时针角度旋转。水平图像应为1250×608(也以10%逆时针角度旋转),在图像右侧约300 px的额外透明背景空间,使其很好地适合所提供的列。确保电话图像是PNG格式的透明背景。这是我今天贴的照片。
订阅我们的YOUTUBE频道
在我们开始构建过程之前,下面是我们将使用可视化构建器创建的部分布局的线框视图。
使用VisualBuilder,让我们从向布局中添加另一个常规部分开始。然后在您的部分中添加三列(四分之一行)。
在添加第一个模块之前,转到行设置并更新以下内容:
在“设计”选项卡…下
使用自定义宽度:是
海关宽度:91%
使用自定义水槽宽度:是
排水沟宽度:1
第2栏自定义填充:5%顶部
第3栏自定义填充:24%顶部
在布局的第一个(最左边)列中,添加一个图像模块并按如下方式更新图像设置:
在Content选项卡下…
图片URL:[上传图片#1]
在“设计”选项卡…下
力全宽:是
动画风格:滚动
动画方向:右
动画强度:16%
动画启动透明度:100%
注:除了滚动动画效果,这个动画设置的独特之处在于,您以完全不透明的方式启动动画,这样手机图像总是可见的。此外,16%的强度使“滚”降到最低。这创造了一个更像生活的动画。它还可以将动画定向到右侧,因为图像位于页面的左侧。
保存设置
现在移到中间(第四个)列,其中分隔模块将用于在文本上方添加一个短的分隔线。
向列中添加一个分隔模块。
然后按以下方式更新设置:
在Content选项卡下…
秀师:是的
在“设计”选项卡…下
颜色:#e0c48f
隔板重量:3 px
宽度:60 px(您必须键入此值,因为默认值是百分比)
模块对齐:默认(左)
自定义填充:80 px顶部,80 px左
动画风格:折叠
动画方向:右
动画持续时间:1200 ms
动画延迟:50 ms
动画强度:70%
动画启动透明度:0%
保存设置
在“分区模块”下添加具有以下设置的“调用行动模块”:
在Content选项卡下…
标题:“千字”
按钮文本:“了解更多”
内容:“Lorem ipsum dolor,consectetur adipipcing elit.”[医]双贝母和长臂猿,孕鼠。SED NEC purus tempus,smadtis mi id.“
链接:#
使用背景色:否
在临猗企业网站建设“设计”选项卡…下
文字颜色:深色
文本方向:左
标题字体:Lato,Bold(B)大写(TT)
页眉字体大小:38 px
标题文本颜色:#33454f
标题字母间距:0.2em
标头线高度:1.4em
车身字体:Lato
体型尺寸:18 px
正文颜色:#9b9b9b
身高:1.8米
为按钮使用自定义样式:是
按钮文本大小:15 px
按钮文本颜色:#f2733c
按钮背景颜色:RGBA(225,225,225,0)
按钮边框宽度:0 px
按钮字母间距:2 PX
按钮字体:Lato,Bold(B),大写(TT)
按钮图标:右箭头
只显示图标上的图标为按钮:不
按钮Hover字母间距:0px
动画风格:折叠
动画方向:右
动画持续时间:1200 ms
动画延迟:50 ms
动画强度:70%
动画启动透明度:0%
注:这个动画给出了从左边折叠出来的文本的外观。请注意,这些动画设置与其上方的分隔模块动画匹配。
保存设置
接下来,在刚才创建的“调用操作”模块下添加一个图像模块。按以下方式更新图像设置:
在Content选项卡下…
图片URL:[上传图片#2]
在“设计”选项卡…下
力全宽:是
动画风格:滚动
动画方向:左
动画强度:13%
动画启动透明度:100%
这是我们的第二(中)栏。现在,让我们在第三列(最右边)中添加图像#3。为此,我们可以复制/复制刚刚添加到第二列底部的图像模块,并将其粘贴到第三列中。因为动画样式是相同的,所以需要更新图像模块的所有内容都是实际的图像URL。
将新的图像URL添加到第三列中的复制图像后,继续重复/复制在第二列顶部创建的Divider模块和ActionModule调用,并在第三列的图像#3下拖动/粘贴这两个模块。
对于分区模块,将“设计”选项卡下的“动画方向”设置更改为“左”。
对于新的“行动呼吁”模块,请继续更新以下设置:
在Content选项卡下…
标题:一种新的建筑方式
在“设计”选项卡…下
自定义填充:右80 px,底部80 px,左80 px
动画方向:左
作为一种额外的好处,我们已经将今天的教程中的部分打包成免费下载,您可以使用下面的电子邮件选择表单。只要输入你的电子邮件,下载按钮就会出现。如果你已经是我们Divi通讯的一部分,不要担心“重新订阅”。重新输入您的电子邮件将不会导致更多的电子邮件或重复。它只会显示下载。
好好享受吧!
加入DiviNewlsetter,我们将电子邮件给你一个最终的Divi登陆页面布局包的副本,加上吨其他惊人的和免费的Divi资源,提示和技巧。跟着走,你很快就会成为迪维大师。如果您已经订阅,只需在下面键入您的电子邮件地址,然后单击下载以访问布局包。
窗体顶端
下载
窗体底端
要使用这些下载,首先要定位已压缩的文件动画效果第5部分在我们的下载文件夹中。解压缩以显示下列进口。
动画效果第5部分(第1节)
动画效果第5部分(第2节)
在WordPress管理中导航到divi>divi库>导入和导出。当可移植模式弹出时,单击IMPORT选项卡并单击标记为SELECT FILE的按钮。
选择您喜欢的json文件,然后单击“ImportDiviBuilder布局”。导入完成后,导航到POST或页面,您想要向其中添加上述部分之一。
激活视觉构建器。导航到要添加上述部分之一的页面。单击“添加新部分”图标时,将显示“从库中添加”选项。选择此选项并选择所需的布局。
这个布局有点棘手。但是,一旦你得到正确的图像和正确的间隔,动画把整个布局很好地结合在一起。像生活一样滚动的手机图像,几乎看上去像是有人在白色的桌子上滑动到我们的视图中,当我们向下滚动页面。这个滚动动画的例子绝对是一个突出的例子。
在下一篇文章中,我将以第6部分结束我们的系列文章。我将向您展示如何使用幻灯片动画与一些自定义图像和CSS创建一个惊人的布局特色烹饪食谱。然而,相同的布局可以调整,并用于许多不同的特色项目。
我期待着在临猗企业网站建设评论中听到你的意见。
最新文章
2019.07.03
临猗建站:使用精益方法启动软件
2019.07.03
临猗网站设计:语义版本控制是什么
2019.07.03
临猗网站制作:在WordPress中使用图标和矢量
2019.07.03
临猗网站设计:如何写最好的关于我的网页可能
2019.07.03
临猗网站建设:如何为Twitter拥有一个酷的Bio可以帮助你获得更多的客户
2019.05.27
临猗企业网站建设:如何使用Divi照片市场布局包将您的商店转换为多供应商市场
2019.05.27
临猗企业网站制作:如何改变Divi文案版面插图的颜色
2019.05.27
临猗网站建设:如何使用FancyProductDesigner对WooCommerce网站进行大修
2019.05.27
临猗公司网站建设:WordPress 4.9的新图片库Widget和你能用它做什么
2019.05.27
临猗网站开发:如何使用Divi的新过滤器选项美化您的图像
随机推荐
2019.05.27
临猗企业网站制作:如何改变Divi文案版面插图的颜色
2019.07.03
临猗网站设计:如何写最好的关于我的网页可能
2019.05.27
临猗公司网站建设:WordPress 4.9的新图片库Widget和你能用它做什么
2019.05.25
临猗企业网站建设:如何创造性地利用Divi中的行盒阴影
2019.05.25
临猗企业网站建设:使用Divi的动画将内容滚动到视图中
2019.05.27
临猗网站开发:如何使用Divi的新过滤器选项美化您的图像
2019.05.25
临猗企业网站建设:如何针对不同客户类型个性化WooCommerce
2019.07.03
临猗网站制作:在WordPress中使用图标和矢量
2019.05.27
临猗企业网站建设:如何使用Divi照片市场布局包将您的商店转换为多供应商市场
2019.07.03
临猗建站:使用精益方法启动软件