網(wǎng)頁設(shè)計新趨勢——滾屏動畫網(wǎng)站欣賞
動畫效果正逐步成為網(wǎng)頁設(shè)計中具有極大影響力的主力軍：開發(fā)者們把網(wǎng)頁變成了他們的試驗田，從基礎(chǔ)的動畫開始，再到如今前衛(wèi)成熟的技術(shù)。以動效驅(qū)動的項目如雨后春筍般出現(xiàn)，無疑推動了網(wǎng)頁技術(shù)的發(fā)展，也使開發(fā)者有了無盡的渴望，讓網(wǎng)頁效果更上一層樓。網(wǎng)絡(luò)正在慢慢成為有趣、精致而有活力的東西。
作為任何網(wǎng)站都包含的一部分，動畫也經(jīng)歷著變化，跟隨著潮流，如今甚至成為了網(wǎng)頁錦上添花的元素。雖然有的時候，人們幾乎注意不到動畫——或者說，動畫并不繁雜華麗——但我們?nèi)匀荒芨惺艿絼赢嫷拇嬖凇＝衲?，滾動觸發(fā)動效與慵懶動畫（在動畫制作中一種為節(jié)省成本和時間而被廣泛應(yīng)用的制作方式）最受歡迎。這些動畫給網(wǎng)站帶來了獨特的風(fēng)格和吸引力 ，為用戶提供更為順滑、精妙和平和的體驗。這種手法最常見于單頁網(wǎng)站，力求用更具活力的視覺講述他們的故事。不過，這絕非唯一的表現(xiàn)形式——這種動畫也被用于企業(yè)網(wǎng)站，以及通常以多圖形式展現(xiàn)的在線作品集中?？偠灾?，滾動觸發(fā)動效無疑成為了2014年的新潮流。
讓我們來看看這幾個令人印象深刻的例子，它們都巧妙地使用了這種時尚流行的設(shè)計趨勢。
Kaipoche-這個網(wǎng)站展現(xiàn)出了今年舉行的風(fēng)箏節(jié)。它通過簡單的頁面滾動，賦予網(wǎng)頁以生機，使它的設(shè)計充滿活力、引人注目。因此，借助有小動畫的可愛圖形，使界面擁有了著實魅力十足、抓人眼球的外觀。
Bizbrain是一個高水平的一頁式網(wǎng)站。它巧妙地運用彩色圖表來演示統(tǒng)計數(shù)據(jù)。每一塊信息都完美地通過動效支配著。
Drugs and Alcohol on Campus-就像前面的例子,這個充滿交互性的圖示暗中引發(fā)人們對社會熱點問題的思考。這里,滾動效果與主題有機地結(jié)合在一起，使這個問題看起來沒有那么的悲觀、生硬。
Bright Media---該團隊利用了這個前衛(wèi)的設(shè)計趨勢，把所有元素結(jié)合在一起以達到視覺上的統(tǒng)一。這個技術(shù)有效地打造出了一個視覺索引，通過每個介紹的部分來領(lǐng)引用戶，旨在以正確的順序顯示數(shù)據(jù)。此外，每個子頁都包含有精致的動畫裝飾元素。
Adobe Muse CC 網(wǎng)站富有創(chuàng)造力，簡潔而雅致，利用藝術(shù)手段更加有效地突出新產(chǎn)品。網(wǎng)站設(shè)計主要以簡潔形狀和紙質(zhì)感插圖相結(jié)合，滾動鼠標可以看到它們組合產(chǎn)生的生動動畫。
Fluger開發(fā)者為游客提供了一架“小飛機”來瀏覽網(wǎng)站，你可以通過滾動鼠標滾輪來實現(xiàn)駕駛飛機瀏覽。網(wǎng)站巧妙的將實景攝影元素和手繪插圖結(jié)合，而后者會讓你的整個旅程充滿活力。
Fillet 是個漂亮的扁平風(fēng)網(wǎng)站，當你向下滾動鼠標時每個字母都順暢地轉(zhuǎn)化成一堆詞組。這網(wǎng)站的特效，將整個轉(zhuǎn)變過程描述為一種愉快而又平和的體驗。
NGUMA 是一個充滿交互性質(zhì)的網(wǎng)站，其魅力在于它動態(tài)和先進的設(shè)計。該網(wǎng)站可以讓你直接與它的代表角色進行交互。它變換自身動畫的效果也是基于自動滾動功能。
Happy New Year 2014 滾動觸發(fā)動效越來越受到節(jié)日型網(wǎng)頁的青睞，尤其是圣誕節(jié)。當然這個網(wǎng)站毫不例外，您大可自由地穿梭于整個動態(tài)的網(wǎng)頁中，體驗一份溫馨的節(jié)日氣息。
Merry Christmallax 這個網(wǎng)站很像之前的那個，這個創(chuàng)意網(wǎng)站旨在為忠實用戶和常駐用戶營造一種溫暖而走心的慶祝方式。故事起于一張簡潔的紙，終于一幅生動活潑的插畫場景——整個動畫的觸發(fā)都是通過滾動鼠標實現(xiàn)的。
Pixelgyar 這是有關(guān)圣誕節(jié)網(wǎng)站的又一個典型代表。“圣誕老人”的整個行程取決于你的動作，滾動鼠標讓“圣誕老人”完成他的目標吧！
Make Your Money Matters 這是一個促銷網(wǎng)站，生動地展示出了加入信用合作社帶來的好處。相信你會被這段“旅程”所吸引。它所運用的技術(shù)讓整個主題活靈活現(xiàn)，并彰顯一種更好的用戶體驗。
The Future of Mobile Phones：正如名稱所示，該網(wǎng)站將對移動電話的未來前景進行預(yù)測。不出所料，整個頁面是一個可交互的信息圖表，里面充滿了用精巧的動態(tài)圖像來進行展示的數(shù)據(jù)信息。
Camplight：這是一個整潔、干凈、充滿現(xiàn)代感的在線作品集。它運用了一種新穎的交互方式，讓用戶們在體驗的過程里對公司有更密切直觀的了解。
1McHappy Day：頁面輕松地傳遞給用戶一種無憂無慮的童年時光，這要歸功于頁面的設(shè)計形式采用了多種多樣的元素來表現(xiàn)圖形、充滿活力的色彩和正能量的自然背景。整個場景也由一些滾動觸發(fā)動效來進行補充。
CEZ 這又是一個很棒的交互性網(wǎng)站，在滾動技術(shù)的引導(dǎo)下讓整個瀏覽“旅程”充滿活力。
What’s behind the number? 這個網(wǎng)站旨在大力宣傳其防曬霜的優(yōu)點。當你向下滾動鼠標時，你便能享受一段充滿生氣的故事——有效地向你傳達防曬的重要性。
InfoGuest Infographic- 顧名思義，這是我們收集的另一個信息網(wǎng)站。通常，里面充滿了許多信息目錄，高效地與動畫圖示相結(jié)合，以產(chǎn)生更大的影響。
Bolia – 和以上展示的不同，這個富有創(chuàng)造力的團隊將滾動觸發(fā)動效運用到了基于圖片的布局上，使不同的椅子轉(zhuǎn)起來。
Bam 這個公司想把自己的潛力通過長頁布局展示出來，在其中加入目錄和各種用于潤色的圖像。然而，加入滾動觸發(fā)動效之后，使得原本會單調(diào)普通的網(wǎng)站顯得生機勃勃。
Areal Plankstadt 通過頁面之間平滑的切換，整個網(wǎng)頁打造出了一種和諧美觀的感應(yīng)效果，還有緩慢的動畫以及海洋般深沉的配色。
結(jié)論
我們的列表包括精彩的在線信息圖形、栩栩如生的故事網(wǎng)站、富有創(chuàng)意的代理公司。所有這些都得益于生動活潑的滾動觸發(fā)動效。他們營造出了一種沁人心脾、生氣勃勃的用戶體驗。
我們是DATS翻譯小組，我們愛設(shè)計愛英語，通過翻譯設(shè)計的文章共同學(xué)習(xí)進步，雖然我們還有許多不足，但是只要把每個人的微小的力量聚集起來，總有一天會發(fā)出耀眼的光芒~ 歡迎到主頁關(guān)注我們。
翻譯由 Vincent 、風(fēng)聆紫、超飛 、樓蘭舞踏鞭 、スーロク、Vanilla 、小米、任拽拽、斯文敗類、Tongxing007、夢澤、利萬物而不爭、HELLOMAN 共同翻譯完成。
設(shè)計：HELLOMAN
校對：Seagra
本文地址：http://m.likemindfilms.com/tutorial/de2997.html
