欢迎光临智唯网络,我们是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

咨询热线:0757 81089123
广州建站微信号
返回旧版
网站设计News
公司网站建设

滑动图像内容设计,可以增加网站设计的视觉效果

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
13Oct
2017
滑动图像内容设计,可以增加网站设计的视觉效果

使用Divi的动画来展开含有滑动图像的内容

网站添加动画的技巧。动画功能真的很有趣,易于使用。通过Visual Builder,您可以看到自己的创作在每一个阶段都生活起来。来和我一起探索Divi动画的力量。

我们创建了动画演示页面的前两部分。第一部分中标题的设计和动画展示了一种独特的方法,可以在全屏标准部分内对文本模块的元素进行动画化。在构建第二部分时,我们发现了一种将微妙和谐的动画结合到内容行中的方式,可以轻松地用于以具有吸引力的方式在目标网页上展示内容。


今天,我们正在继续我们的旅程,设计在滚动页面时有效(创造性地)使用动画的部分布局。我们将建立我们现场演示页面的第三部分和第四部分,,展示Divi动画功能的强大功能。这两个部分都有可以很容易地用于您自己的项目来展示产品或服务的布局。


这是一个潜移默化的今天我们将要建设的东西


第3节


动画

第4节


动画

准备设计元素


准备好你的图像


对于第三部分,您将需要两个图像。第一个需要约880×600,第二个约为790×880。这些图像大小不一定要精确。我只是包含这些维度来给你一个想法。

在构建第四部分的时候,你也可以在600×400左右的两张图像。

使用Visual Builder


这里不需要高级代码 我们将只使用Visual Builder来设计我们在本系列的第1部分中创建的页面的两个部分。由于你的页面已经设置好了,所以你已经准备好了。

构建演示的第3节


第3部分是一个很好的例子,说明如何使用附带图片设计和动画“动作模块”。

我们来吧

使用Visual Builder,添加一个带有两列行的常规部分。在左栏添加图像模块。

动画

按如下所示更新图像设置:

  • 在“内容”标签下

  • 图片网址:[插入880×600图片]

  • 在设计选项卡...

  • 强制全宽:是

  • 动画风格:幻灯片

  • 动画方向:左

  • 动画强度:20%

  • 动画开始不透明度:100%

  • 注意:此动画只能从右到左滑动图像。这里的关键动画设置是强度。将动画强度设置为20%会缩短图像必须行进的距离才能到达最终的休息位置。

    动画

    保存设置

    添加分频模块


    在右栏中,我们将使用分频模块和号召性用语模块展示我们的内容。分频器模块将用于在文本上方添加一个短分隔线。

    在右列添加一个分频器模块。

    动画

  • 然后更新设置如下:

  • 在“内容”标签下

  • 显示分隔线:是

  • 在“设计”标签下

  • 颜色:#e4ca77分隔线

  • 重量:4px 

  • 宽度:80px(您必须键入此值,因为默认值为百分比)

  • 模块对齐:默认(左)

  • 自定义边距:60px顶部,0px底部

  • 动画风格:折叠

  • 动画方向:右

  • 动画持续时间:1200ms 

  • 动画延迟:50ms 

  • 动画强度:70%

  • 动画开始不透明度:0%

  • 动画


    添加号召性用语模块


    在分隔线模块下,添加一个号召性用语模块,具有以下设置:

    在“内容”标签下

    标题:“完美视图” 

    按钮文字:“了解更多” 

    内容:“Lorem ipsum dolor sit amet,consectetur adipiscing elit。茜草(Fasisus bibendum est vitae felis rhoncus gravida)Sed nec purus tempus,sagittis mi id,efficiencyit nisl。Lorem ipsum dolor sit amet,consectetur adipiscing elit。茜草(Fasisus bibendum est vitae felis rhoncus gravida)Sed nec purus tempus,sagittis mi id,efficiencyit nisi“ 

    链接:#

    使用背景颜色:NO

    动画

  • 在“设计”标签下

  • 文字颜色:深色

  • 文字方向:左

  • 头字体:Lato,大写(TT)

  • 标题字体大小:

  • 38px 

  • 标题文字颜色:#0c0c0c 标题字母间距:0.2em 

  • 标题行高度:1.4em

  • 身体字体:Lato 

  • Body字号:18px 

  • Body Text颜色:#9e9e9e 

  • Body Line身高:1.8em

  • 使用自定义样式按钮:YES 

  • 按钮文字大小:15px 

  • 按钮文字颜色:#000000 

  • 按钮背景颜色:rgba(225,225,225,0)

  • 按钮边框宽度:0px 

  • 按钮字母间距:2px 

  • 按钮字体:Lato,Bold(B),大写( TT)

  • 按钮图标:右箭头

  • 只显示图标上悬停按钮:NO 

  • 按钮悬停信号间距:0px

  • 动画风格:折叠

  • 动画方向:右

  • 动画持续时间:1200ms 

  • 动画延迟:50ms 

  • 动画强度:70%

  • 动画开始不透明度:0%

  • 注意:当图像向左滑动时,此动画会将文本的外观从图像后面折出。

    动画


    现在单击以编辑行设置并更新以下内容:

    在“设计”标签下

    使用自定义宽度:YES 

    自定义宽度:1366px

    在高级选项卡下

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

    z-index: 999;

    注意:在自动化期间,右侧的文本与图像重叠。此CSS确保图像(第1列)保留在整个动画的文本顶部,创建更清晰的效果。

    保存设置

    复制您的行并更新它


    这是第一行。为了节省创建第二行的时间,请复制刚创建的行。

    编辑重复的行设置如下:

    在高级选项卡下

    取出第1列主要元素中的自定义CSS,并将其添加到第2列主要元素框中。

    关于网站制作,看看客户怎么说
    ***(匿名) 评价文章 9个印刷包装网站制作案例欣赏

    印刷包装网站制作,意义重大,自不必说,印刷包装网站制作是我们面对互联网用户的桥梁,这个桥梁的完美程度将访客对于我们的第一印象产生极大的影响。整合包装网站建设案...

    ***(匿名) 评价文章 广州高端网站制作在业内有良好的口碑

    广州高端网站制作在业内有良好的口碑 无论在任何的行业能够有良好的口碑都是非常不容易的,尤其是现在的竞争是那么的激烈。而且现在的互联网非常发达,很多人都看中了互...

    ***(匿名) 评价文章 网站制作经验分享 企业网站在初期设计时应该考虑哪些因素

    A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院...

    公司网站建设
    Hi,Are you ready?
    准备好开始了吗?
    那就与我们取得联系吧

    广州建站 感恩回馈

    咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
    价值5880元《全网营销方案+优化视频教程》一份!
    下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
    24小时免费咨询热线0757-8108-9123
    合作意向表
    您需要的服务
    您最关注的地方
    预算
    • 验证码

    直接咨询