網(wǎng)站設(shè)計(jì)

Website development

滑動(dòng)圖像內(nèi)容設(shè)計(jì)，可以增加網(wǎng)站設(shè)計(jì)的視覺(jué)效果

發(fā)布時(shí)間：2017-10-13 10:23:39

使用Divi的動(dòng)畫(huà)來(lái)展開(kāi)含有滑動(dòng)圖像的內(nèi)容

網(wǎng)站添加動(dòng)畫(huà)的技巧。動(dòng)畫(huà)功能真的很有趣，易于使用。通過(guò)Visual Builder，您可以看到自己的創(chuàng)作在每一個(gè)階段都生活起來(lái)。來(lái)和我一起探索Divi動(dòng)畫(huà)的力量。

我們創(chuàng)建了動(dòng)畫(huà)演示頁(yè)面的前兩部分。第一部分中標(biāo)題的設(shè)計(jì)和動(dòng)畫(huà)展示了一種獨(dú)特的方法，可以在全屏標(biāo)準(zhǔn)部分內(nèi)對(duì)文本模塊的元素進(jìn)行動(dòng)畫(huà)化。在構(gòu)建第二部分時(shí)，我們發(fā)現(xiàn)了一種將微妙和諧的動(dòng)畫(huà)結(jié)合到內(nèi)容行中的方式，可以輕松地用于以具有吸引力的方式在目標(biāo)網(wǎng)頁(yè)上展示內(nèi)容。

今天，我們正在繼續(xù)我們的旅程，設(shè)計(jì)在滾動(dòng)頁(yè)面時(shí)有效（創(chuàng)造性地）使用動(dòng)畫(huà)的部分布局。我們將建立我們現(xiàn)場(chǎng)演示頁(yè)面的第三部分和第四部分，展示Divi動(dòng)畫(huà)功能的強(qiáng)大功能。這兩個(gè)部分都有可以很容易地用于您自己的項(xiàng)目來(lái)展示產(chǎn)品或服務(wù)的布局。

這是一個(gè)潛移默化的今天我們將要建設(shè)的東西

第3節(jié)

動(dòng)畫(huà)

第4節(jié)

動(dòng)畫(huà)

準(zhǔn)備設(shè)計(jì)元素

準(zhǔn)備好你的圖像

對(duì)于第三部分，您將需要兩個(gè)圖像。第一個(gè)需要約880×600，第二個(gè)約為790×880。這些圖像大小不一定要精確。我只是包含這些維度來(lái)給你一個(gè)想法。

在構(gòu)建第四部分的時(shí)候，你也可以在600×400左右的兩張圖像。

使用Visual Builder

這里不需要高級(jí)代碼我們將只使用Visual Builder來(lái)設(shè)計(jì)我們?cè)诒鞠盗械牡?部分中創(chuàng)建的頁(yè)面的兩個(gè)部分。由于你的頁(yè)面已經(jīng)設(shè)置好了，所以你已經(jīng)準(zhǔn)備好了。

構(gòu)建演示的第3節(jié)

第3部分是一個(gè)很好的例子，說(shuō)明如何使用附帶圖片設(shè)計(jì)和動(dòng)畫(huà)“動(dòng)作模塊”。

我們來(lái)吧

使用Visual Builder，添加一個(gè)帶有兩列行的常規(guī)部分。在左欄添加圖像模塊。

動(dòng)畫(huà)

按如下所示更新圖像設(shè)置：

在“內(nèi)容”標(biāo)簽下
圖片網(wǎng)址：[插入880×600圖片]
在設(shè)計(jì)選項(xiàng)卡...
強(qiáng)制全寬：是
動(dòng)畫(huà)風(fēng)格：幻燈片
動(dòng)畫(huà)方向：左
動(dòng)畫(huà)強(qiáng)度：20％
動(dòng)畫(huà)開(kāi)始不透明度：100％

注意：此動(dòng)畫(huà)只能從右到左滑動(dòng)圖像。這里的關(guān)鍵動(dòng)畫(huà)設(shè)置是強(qiáng)度。將動(dòng)畫(huà)強(qiáng)度設(shè)置為20％會(huì)縮短圖像必須行進(jìn)的距離才能到達(dá)終的休息位置。

動(dòng)畫(huà)

保存設(shè)置

添加分頻模塊

在右欄中，我們將使用分頻模塊和號(hào)召性用語(yǔ)模塊展示我們的內(nèi)容。分頻器模塊將用于在文本上方添加一個(gè)短分隔線。

在右列添加一個(gè)分頻器模塊。

動(dòng)畫(huà)

然后更新設(shè)置如下：
在“內(nèi)容”標(biāo)簽下
顯示分隔線：是
在“設(shè)計(jì)”標(biāo)簽下
顏色：＃e4ca77分隔線
重量：4px
寬度：80px（您必須鍵入此值，因?yàn)槟J(rèn)值為百分比）
模塊對(duì)齊：默認(rèn)（左）
自定義邊距：60px頂部，0px底部
動(dòng)畫(huà)風(fēng)格：折疊
動(dòng)畫(huà)方向：右
動(dòng)畫(huà)持續(xù)時(shí)間：1200ms
動(dòng)畫(huà)延遲：50ms
動(dòng)畫(huà)強(qiáng)度：70％
動(dòng)畫(huà)開(kāi)始不透明度：0％

動(dòng)畫(huà)

添加號(hào)召性用語(yǔ)模塊

在分隔線模塊下，添加一個(gè)號(hào)召性用語(yǔ)模塊，具有以下設(shè)置：

在“內(nèi)容”標(biāo)簽下

標(biāo)題：“完美視圖”

按鈕文字：“了解更多”

內(nèi)容：“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

動(dòng)畫(huà)