網(wǎng)頁(yè)設(shè)計(jì)中滾動(dòng)觸發(fā)動(dòng)畫(huà)的5個(gè)實(shí)例

時(shí)間：2023-10-05 06:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-05 06:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)中滾動(dòng)觸發(fā)動(dòng)畫(huà)的5個(gè)實(shí)例：如今，很難想象一個(gè)沒(méi)有任何動(dòng)態(tài)元素的現(xiàn)代網(wǎng)站。小型、大型、中型它們——將出現(xiàn)在許多網(wǎng)站上。Web 用戶界面不再只填充靜態(tài)解決方案。您可以在這里、那里以及幾乎任何地方看到各種動(dòng)畫(huà)。每個(gè)人都試圖遠(yuǎn)離被動(dòng)、停滯的界面，并選擇更具吸引力的交互界面。

無(wú)論是異想天開(kāi)的個(gè)人網(wǎng)站還是嚴(yán)肅的公司網(wǎng)站，您都可能會(huì)偶然發(fā)現(xiàn)一些有趣的動(dòng)態(tài)細(xì)節(jié)。在所有令人眼花繚亂的種類中，滾動(dòng)觸發(fā)的動(dòng)畫(huà)是最受歡迎的動(dòng)畫(huà)之一。

什么是滾動(dòng)觸發(fā)動(dòng)畫(huà)？

滾動(dòng)觸發(fā)的動(dòng)畫(huà)已經(jīng)伴隨我們多年了。與任何其他強(qiáng)勁趨勢(shì)一樣，它經(jīng)歷了起起落落；今天是它重新上馬的日子。

這種方法越來(lái)越受歡迎，因?yàn)樗试S網(wǎng)站所有者將靜態(tài)界面轉(zhuǎn)變?yōu)閯?dòng)態(tài)界面，而無(wú)需犧牲空間或花費(fèi)大量資金。它結(jié)構(gòu)緊湊，重量相對(duì)較輕。它只是自然閱讀流程的一部分，可以豐富用戶體驗(yàn)并使其愉悅。

此外，當(dāng)您需要設(shè)置不顯眼的焦點(diǎn)時(shí)，滾動(dòng)觸發(fā)的動(dòng)畫(huà)是很好的工具。他們還可以將您的聽(tīng)眾從一個(gè)檢查點(diǎn)引導(dǎo)到另一個(gè)檢查點(diǎn)。該技術(shù)有很多好處和好處，并且已經(jīng)經(jīng)過(guò)了時(shí)間的考驗(yàn)。

讓我們考慮一些現(xiàn)代網(wǎng)站的杰出示例，其中滾動(dòng)觸發(fā)的動(dòng)畫(huà)支持用戶體驗(yàn)的美感和交互性。

滾動(dòng)觸發(fā)動(dòng)畫(huà)示例

Limnia

盡管Limnia不能吹噓出色的滾動(dòng)觸發(fā)動(dòng)畫(huà)，但由于這種趨勢(shì)，它是常規(guī)促銷網(wǎng)站的一個(gè)完美例子，它煥然一新。

在這里，您可以看到滾動(dòng)觸發(fā)的簡(jiǎn)單效果。更準(zhǔn)確地說(shuō)，當(dāng)該部分進(jìn)入視圖時(shí)，會(huì)激活效果。它們是圖像和內(nèi)容塊的簡(jiǎn)短漂亮過(guò)渡。但是，將界面變成看起來(lái)現(xiàn)代的作品就足夠了，同時(shí)符合公司的品牌。

此外，Limnia 向我們證明了現(xiàn)代滾動(dòng)觸發(fā)動(dòng)畫(huà)不僅僅是關(guān)于老式的大型動(dòng)畫(huà)。如今，微交互和小而短的效果占據(jù)了主導(dǎo)地位。因此，趨勢(shì)也是關(guān)于可以被視為過(guò)渡效果的微小動(dòng)畫(huà)。

Culturely Connected

Culturely Connected是一個(gè)典型的、部分插圖的網(wǎng)站，其中豐富了滾動(dòng)觸發(fā)的解決方案。后者有助于揭示隱藏在項(xiàng)目中的整個(gè)美感，因?yàn)椴鍒D和動(dòng)畫(huà)注定要一起工作。這兩個(gè)設(shè)計(jì)元素構(gòu)成了非常強(qiáng)大的一對(duì)。

在這里，幾乎每個(gè)部分都有自己的花卉作品，并在滾動(dòng)時(shí)觸發(fā)了交互式組件。該動(dòng)作還創(chuàng)造了一種生動(dòng)的、會(huì)呼吸的界面的感覺(jué)。請(qǐng)注意，盡管有許多動(dòng)態(tài)細(xì)節(jié)，但它們既不壓倒也不令人生畏，而是完美地協(xié)同工作以創(chuàng)造和諧的體驗(yàn)。

Tall, True & Tangled

正如我們之前提到的，滾動(dòng)觸發(fā)的動(dòng)畫(huà)可用于將用戶從一個(gè)點(diǎn)引導(dǎo)到另一個(gè)點(diǎn)，從而允許所有者控制閱讀流程。Tall, True & Tangled就是一個(gè)很好的例子。

該團(tuán)隊(duì)創(chuàng)建了從上到下的整個(gè)視覺(jué)路徑。您可以在這里看到一條簡(jiǎn)單線條形式的小軌道，它從一開(kāi)始就吸引了注意力，并從上到下引導(dǎo)視線。它完美地融入了整個(gè)設(shè)計(jì)，完成了主題，并且不會(huì)激怒用戶。它只是有效。

世界語(yǔ)

與前面的示例非常相似，世界語(yǔ)背后的團(tuán)隊(duì)也利用滾動(dòng)觸發(fā)動(dòng)畫(huà)的趨勢(shì)來(lái)操縱閱讀流程。在這里，您可以看到在主頁(yè)的整個(gè)探索過(guò)程中伴隨著讀者的汽車（以及幾個(gè)部分中的飛機(jī)）。它移動(dòng)、旋轉(zhuǎn)，甚至翻轉(zhuǎn)。它創(chuàng)建了一條自然吸引注意力并設(shè)置一些錨點(diǎn)的路徑。

每個(gè)部分都增強(qiáng)了動(dòng)態(tài)效果，也由垂直滾動(dòng)觸發(fā)?？傮w而言，界面看起來(lái)清新、現(xiàn)代且令人興奮。

Wits

Wits背后的團(tuán)隊(duì)設(shè)法用大量滾動(dòng)觸發(fā)的動(dòng)畫(huà)填充主頁(yè)，并且仍然保持娛樂(lè)性和信息性部分之間的平衡，達(dá)到和諧。

在這里，每個(gè)部分都是一個(gè)有其主題和支持動(dòng)畫(huà)的屏幕。在某些情況下，它們很短；在其他人中，它們很長(zhǎng)。其中一些操作界面的標(biāo)準(zhǔn)細(xì)節(jié)，例如排版或圖像，而另一些則處理一些不尋常的概念。

Wits 是一個(gè)例子，它向我們展示了過(guò)多的滾動(dòng)觸發(fā)動(dòng)畫(huà)是如何產(chǎn)生好處而不是損害用戶體驗(yàn)的。

結(jié)論

滾動(dòng)觸發(fā)動(dòng)畫(huà)是一種時(shí)斷時(shí)續(xù)的趨勢(shì)。即使它不是新的、大的或非凡的東西，當(dāng)它回來(lái)時(shí)，它很容易與當(dāng)今的主流合作，并為界面增添了風(fēng)味。

它吸引注意力，賦予界面前沿的感覺(jué)，并將用戶體驗(yàn)轉(zhuǎn)變?yōu)橐环N愉快的消遣。在某些情況下，它很安靜，幾乎不引人注目，而在其他情況下，它聽(tīng)起來(lái)像雷聲一樣響亮。它的用途非常廣泛。因此，每種類型的網(wǎng)站都可能打開(kāi)其隱藏的可能性并從中受益。