網(wǎng)頁設(shè)計(jì)新趨勢(shì)——滾屏動(dòng)畫網(wǎng)站欣賞

動(dòng)畫效果正逐步成為網(wǎng)頁設(shè)計(jì)中具有極大影響力的主力軍：開發(fā)者們把網(wǎng)頁變成了他們的試驗(yàn)田，從基礎(chǔ)的動(dòng)畫開始，再到如今前衛(wèi)成熟的技術(shù)。以動(dòng)效驅(qū)動(dòng)的項(xiàng)目如雨后春筍般出現(xiàn)，無疑推動(dòng)了網(wǎng)頁技術(shù)的發(fā)展，也使開發(fā)者有了無盡的渴望，讓網(wǎng)頁效果更上一層樓。網(wǎng)絡(luò)正在慢慢成為有趣、精致而有活力的東西。    

作為任何網(wǎng)站都包含的一部分，動(dòng)畫也經(jīng)歷著變化，跟隨著潮流，如今甚至成為了網(wǎng)頁錦上添花的元素。雖然有的時(shí)候，人們幾乎注意不到動(dòng)畫——或者說，動(dòng)畫并不繁雜華麗——但我們?nèi)匀荒芨惺艿絼?dòng)畫的存在。今年，滾動(dòng)觸發(fā)動(dòng)效與慵懶動(dòng)畫（在動(dòng)畫制作中一種為節(jié)省成本和時(shí)間而被廣泛應(yīng)用的制作方式）最受歡迎。這些動(dòng)畫給網(wǎng)站帶來了獨(dú)特的風(fēng)格和吸引力 ，為用戶提供更為順滑、精妙和平和的體驗(yàn)。這種手法最常見于單頁網(wǎng)站，力求用更具活力的視覺講述他們的故事。不過，這絕非唯一的表現(xiàn)形式——這種動(dòng)畫也被用于企業(yè)網(wǎng)站，以及通常以多圖形式展現(xiàn)的在線作品集中?？偠灾瑵L動(dòng)觸發(fā)動(dòng)效無疑成為了2014年的新潮流。    

讓我們來看看這幾個(gè)令人印象深刻的例子，它們都巧妙地使用了這種時(shí)尚流行的設(shè)計(jì)趨勢(shì)。

Kaipoche-這個(gè)網(wǎng)站展現(xiàn)出了今年舉行的風(fēng)箏節(jié)。它通過簡(jiǎn)單的頁面滾動(dòng)，賦予網(wǎng)頁以生機(jī)，使它的設(shè)計(jì)充滿活力、引人注目。因此，借助有小動(dòng)畫的可愛圖形，使界面擁有了著實(shí)魅力十足、抓人眼球的外觀。

Bizbrain是一個(gè)高水平的一頁式網(wǎng)站。它巧妙地運(yùn)用彩色圖表來演示統(tǒng)計(jì)數(shù)據(jù)。每一塊信息都完美地通過動(dòng)效支配著。

Drugs and Alcohol on Campus-就像前面的例子,這個(gè)充滿交互性的圖示暗中引發(fā)人們對(duì)社會(huì)熱點(diǎn)問題的思考。這里,滾動(dòng)效果與主題有機(jī)地結(jié)合在一起，使這個(gè)問題看起來沒有那么的悲觀、生硬。

Bright Media---該團(tuán)隊(duì)利用了這個(gè)前衛(wèi)的設(shè)計(jì)趨勢(shì)，把所有元素結(jié)合在一起以達(dá)到視覺上的統(tǒng)一。這個(gè)技術(shù)有效地打造出了一個(gè)視覺索引，通過每個(gè)介紹的部分來領(lǐng)引用戶，旨在以正確的順序顯示數(shù)據(jù)。此外，每個(gè)子頁都包含有精致的動(dòng)畫裝飾元素。

Adobe Muse CC 網(wǎng)站富有創(chuàng)造力，簡(jiǎn)潔而雅致，利用藝術(shù)手段更加有效地突出新產(chǎn)品。網(wǎng)站設(shè)計(jì)主要以簡(jiǎn)潔形狀和紙質(zhì)感插圖相結(jié)合，滾動(dòng)鼠標(biāo)可以看到它們組合產(chǎn)生的生動(dòng)動(dòng)畫。

Fluger開發(fā)者為游客提供了一架“小飛機(jī)”來瀏覽網(wǎng)站，你可以通過滾動(dòng)鼠標(biāo)滾輪來實(shí)現(xiàn)駕駛飛機(jī)瀏覽。網(wǎng)站巧妙的將實(shí)景攝影元素和手繪插圖結(jié)合，而后者會(huì)讓你的整個(gè)旅程充滿活力。

Fillet 是個(gè)漂亮的扁平風(fēng)網(wǎng)站，當(dāng)你向下滾動(dòng)鼠標(biāo)時(shí)每個(gè)字母都順暢地轉(zhuǎn)化成一堆詞組。這網(wǎng)站的特效，將整個(gè)轉(zhuǎn)變過程描述為一種愉快而又平和的體驗(yàn)。

NGUMA 是一個(gè)充滿交互性質(zhì)的網(wǎng)站，其魅力在于它動(dòng)態(tài)和先進(jìn)的設(shè)計(jì)。該網(wǎng)站可以讓你直接與它的代表角色進(jìn)行交互。它變換自身動(dòng)畫的效果也是基于自動(dòng)滾動(dòng)功能。

Happy New Year 2014 滾動(dòng)觸發(fā)動(dòng)效越來越受到節(jié)日型網(wǎng)頁的青睞，尤其是圣誕節(jié)。當(dāng)然這個(gè)網(wǎng)站毫不例外，您大可自由地穿梭于整個(gè)動(dòng)態(tài)的網(wǎng)頁中，體驗(yàn)一份溫馨的節(jié)日氣息。

Merry Christmallax 這個(gè)網(wǎng)站很像之前的那個(gè)，這個(gè)創(chuàng)意網(wǎng)站旨在為忠實(shí)用戶和常駐用戶營(yíng)造一種溫暖而走心的慶祝方式。故事起于一張簡(jiǎn)潔的紙，終于一幅生動(dòng)活潑的插畫場(chǎng)景——整個(gè)動(dòng)畫的觸發(fā)都是通過滾動(dòng)鼠標(biāo)實(shí)現(xiàn)的。

Pixelgyar 這是有關(guān)圣誕節(jié)網(wǎng)站的又一個(gè)典型代表。“圣誕老人”的整個(gè)行程取決于你的動(dòng)作，滾動(dòng)鼠標(biāo)讓“圣誕老人”完成他的目標(biāo)吧！

Make Your Money Matters 這是一個(gè)促銷網(wǎng)站，生動(dòng)地展示出了加入信用合作社帶來的好處。相信你會(huì)被這段“旅程”所吸引。它所運(yùn)用的技術(shù)讓整個(gè)主題活靈活現(xiàn)，并彰顯一種更好的用戶體驗(yàn)。

The Future of Mobile Phones：正如名稱所示，該網(wǎng)站將對(duì)移動(dòng)電話的未來前景進(jìn)行預(yù)測(cè)。不出所料，整個(gè)頁面是一個(gè)可交互的信息圖表，里面充滿了用精巧的動(dòng)態(tài)圖像來進(jìn)行展示的數(shù)據(jù)信息。

Camplight：這是一個(gè)整潔、干凈、充滿現(xiàn)代感的在線作品集。它運(yùn)用了一種新穎的交互方式，讓用戶們?cè)隗w驗(yàn)的過程里對(duì)公司有更密切直觀的了解。

1McHappy Day：頁面輕松地傳遞給用戶一種無憂無慮的童年時(shí)光，這要?dú)w功于頁面的設(shè)計(jì)形式采用了多種多樣的元素來表現(xiàn)圖形、充滿活力的色彩和正能量的自然背景。整個(gè)場(chǎng)景也由一些滾動(dòng)觸發(fā)動(dòng)效來進(jìn)行補(bǔ)充。

CEZ 這又是一個(gè)很棒的交互性網(wǎng)站，在滾動(dòng)技術(shù)的引導(dǎo)下讓整個(gè)瀏覽“旅程”充滿活力。

What’s behind the number?  這個(gè)網(wǎng)站旨在大力宣傳其防曬霜的優(yōu)點(diǎn)。當(dāng)你向下滾動(dòng)鼠標(biāo)時(shí)，你便能享受一段充滿生氣的故事——有效地向你傳達(dá)防曬的重要性。

InfoGuest Infographic- 顧名思義，這是我們收集的另一個(gè)信息網(wǎng)站。通常，里面充滿了許多信息目錄，高效地與動(dòng)畫圖示相結(jié)合，以產(chǎn)生更大的影響。

Bolia – 和以上展示的不同，這個(gè)富有創(chuàng)造力的團(tuán)隊(duì)將滾動(dòng)觸發(fā)動(dòng)效運(yùn)用到了基于圖片的布局上，使不同的椅子轉(zhuǎn)起來。

Bam 這個(gè)公司想把自己的潛力通過長(zhǎng)頁布局展示出來，在其中加入目錄和各種用于潤(rùn)色的圖像。然而，加入滾動(dòng)觸發(fā)動(dòng)效之后，使得原本會(huì)單調(diào)普通的網(wǎng)站顯得生機(jī)勃勃。

Areal Plankstadt 通過頁面之間平滑的切換，整個(gè)網(wǎng)頁打造出了一種和諧美觀的感應(yīng)效果，還有緩慢的動(dòng)畫以及海洋般深沉的配色。

結(jié)論

我們的列表包括精彩的在線信息圖形、栩栩如生的故事網(wǎng)站、富有創(chuàng)意的代理公司。所有這些都得益于生動(dòng)活潑的滾動(dòng)觸發(fā)動(dòng)效。他們營(yíng)造出了一種沁人心脾、生氣勃勃的用戶體驗(yàn)。

我們是DATS翻譯小組，我們愛設(shè)計(jì)愛英語，通過翻譯設(shè)計(jì)的文章共同學(xué)習(xí)進(jìn)步，雖然我們還有許多不足，但是只要把每個(gè)人的微小的力量聚集起來，總有一天會(huì)發(fā)出耀眼的光芒~ 歡迎到主頁關(guān)注我們。

翻譯由 Vincent 、風(fēng)聆紫、超飛 、樓蘭舞踏鞭 、スーロク、Vanilla 、小米、任拽拽、斯文敗類、Tongxing007、夢(mèng)澤、利萬物而不爭(zhēng)、HELLOMAN 共同翻譯完成。

設(shè)計(jì)：HELLOMAN

校對(duì)：Seagra

原文鏈接：http://designmodo.com/scroll-animations-web-design/