循環(huán)（Loop）是現(xiàn)代瀏覽器中HTML5視頻標(biāo)簽下的布爾屬性，包括IE9在內(nèi)的主流瀏覽器都支持這一屬性。它能讓一個(gè)或者一系列視頻短片循環(huán)播放。開(kāi)發(fā)者社區(qū)中，網(wǎng)頁(yè)設(shè)計(jì)師非常青睞這一功能，并且截至目前影響了許多項(xiàng)目，讓網(wǎng)站看起來(lái)更加絢麗和精彩。

從作品展示類的網(wǎng)站到移動(dòng)端的專題頁(yè)，循環(huán)視頻背景的運(yùn)用范疇非常廣泛。網(wǎng)頁(yè)開(kāi)發(fā)者們將5~10的視頻作為背景循環(huán)播放，而視頻內(nèi)容通常會(huì)展現(xiàn)出某個(gè)主題，或者有目的性地展現(xiàn)達(dá)成某個(gè)目標(biāo)的過(guò)程，呈現(xiàn)企業(yè)或者團(tuán)隊(duì)的潛在實(shí)力。這種展現(xiàn)方式比起傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)手法，更能挑起用戶的興趣，引人注意，豐富的信息量和多變的內(nèi)容會(huì)讓整體的用戶體驗(yàn)再上一級(jí)臺(tái)階。雖然這些視頻拍攝起來(lái)非常的費(fèi)神費(fèi)力，也許你需要趴在地上拍攝一些場(chǎng)景，但是當(dāng)網(wǎng)站出來(lái)之后，你會(huì)發(fā)現(xiàn)這些努力都是值得的。

如果你還是下不了決心，那么一起來(lái)看看下面這些優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品吧?？朔刂卣系K制作出的循環(huán)動(dòng)態(tài)背景是如何震撼人心的。

Haigh and Hastings

擁有介紹功能的循環(huán)視頻和看起來(lái)優(yōu)雅簡(jiǎn)約的導(dǎo)航結(jié)合到一起，其他產(chǎn)品則使用了高清圖片作為背景，同樣起到了卓有成效的導(dǎo)航作用。

Webgriffe

Webgriffe 使用循環(huán)視頻來(lái)支撐他們的品牌形象，一系列精心拍攝的短視頻被剪輯成短短的十幾秒，不僅介紹了品牌的特色，還用到位的拍攝手法營(yíng)造出令人難忘的場(chǎng)景，循環(huán)播放給用戶強(qiáng)化品牌印象。視頻當(dāng)中還通過(guò)一組工作流程的展示來(lái)呈現(xiàn)了他們的專業(yè)性。

Spacejunk

從視頻的第一秒開(kāi)始，Spacejunk 就將這個(gè)品牌獨(dú)特的印記印在用戶心頭，獨(dú)一無(wú)二的視覺(jué)設(shè)計(jì)和精致入微的視頻圖像令人流連忘返。專業(yè)的設(shè)計(jì)和強(qiáng)大的執(zhí)行性配合著循環(huán)播放，循環(huán)視頻的作用機(jī)會(huì)被他們運(yùn)用到了極致。

Eva

毫無(wú)疑問(wèn)這個(gè)充滿吸引力著陸頁(yè)是通過(guò)循環(huán)視頻來(lái)營(yíng)造出充滿吸引力的界面的。設(shè)計(jì)師明智地將界面劃分為三個(gè)部分，在視覺(jué)上營(yíng)造出趣味性和娛樂(lè)性，最后又落腳在工作流上。

Newrow

這里的循環(huán)視頻被用作鼓勵(lì)那些熱愛(ài)生活的人，循環(huán)播放的視頻內(nèi)容被劃分為兩個(gè)部分，創(chuàng)造性地展示了兩種生活方式的差異。

Gracepoint

Gsacepoint 是一個(gè)典型的單頁(yè)網(wǎng)站，它主要的功能是引導(dǎo)用戶關(guān)注Fox電視臺(tái)的罪案劇。設(shè)計(jì)巧妙地通過(guò)三個(gè)子頁(yè)面和風(fēng)格陰郁的循環(huán)視頻背景來(lái)營(yíng)造出陰謀的氛圍。

Pastamancini

多虧了這組壯觀的風(fēng)景視頻和田園風(fēng)光的特寫，Pastamancini 網(wǎng)站充滿了活力和自然的氛圍，頁(yè)面中其他的元素也很好地呼應(yīng)了這部分內(nèi)容。

Dalbello

充滿了活力的雪山場(chǎng)景和運(yùn)動(dòng)的氛圍被幾個(gè)短視頻完全展現(xiàn)了出來(lái)，為了烘托出視頻內(nèi)容，網(wǎng)頁(yè)在配色和視覺(jué)元素的選取上也獨(dú)具匠心，烘托出了雪山和運(yùn)動(dòng)的主題。

Distill

Distill 項(xiàng)目是一個(gè)為創(chuàng)意工作者而準(zhǔn)備的項(xiàng)目，提供個(gè)人和商用的創(chuàng)意短視頻。歡迎頁(yè)面中漂亮的視頻景觀不僅有歡迎之用，而且也是體現(xiàn)整個(gè)項(xiàng)目?jī)r(jià)值的重要組成部分。

Drygital

打開(kāi) Drygital 的頁(yè)面，映入眼簾的短視頻充滿了動(dòng)態(tài)和炫目的效果，褪色特效讓視頻同浮動(dòng)于視頻之上的LOGO看起來(lái)對(duì)比明顯。巧妙地視頻色調(diào)調(diào)整讓整個(gè)網(wǎng)站的視覺(jué)元素相輔相成。

Trif

Trif 的設(shè)計(jì)看起來(lái)頗為先鋒，給人感覺(jué)非常的復(fù)雜。這種神秘而曖昧的視頻內(nèi)容選取，很容易喚醒用戶對(duì)于網(wǎng)站內(nèi)容的興趣。

Mr. Stefan Braun’s

如何借助短視頻展現(xiàn)出積極向上地情緒，營(yíng)造出有趣而好玩的氛圍？看看這個(gè)網(wǎng)站你就會(huì)知道這樣的循環(huán)視頻背景要怎么拍，如何剪輯才行。

Z+

借助循環(huán)視頻來(lái)展現(xiàn)團(tuán)隊(duì)工作流程，可以說(shuō)是這類視頻設(shè)計(jì)的一個(gè)重要分支。Z+ 的官網(wǎng)也是這么玩兒的，不過(guò)它們還在視頻中植入了好幾個(gè)微妙的暗示作為彩蛋。

Boo Cat Club

Boo Cat 俱樂(lè)部首頁(yè)所使用的視頻傳達(dá)出的愉悅氛圍同網(wǎng)站的口號(hào)“鮮活&生動(dòng)”相互呼應(yīng)，這種設(shè)計(jì)讓用戶和網(wǎng)站在情緒上更容易相互呼應(yīng)。

Triptych

網(wǎng)站首頁(yè)參考了三聯(lián)畫的結(jié)構(gòu)來(lái)營(yíng)造布局，靜態(tài)的畫面之下隱藏了精彩而細(xì)膩的循環(huán)視頻。它們呼應(yīng)了三聯(lián)畫的藝術(shù)主題，還借助技術(shù)讓這種藝術(shù)形式擁有了更強(qiáng)的生命力。

Primal

整個(gè)首頁(yè)是基于一個(gè)包含了若干不同含義短視頻的循環(huán)視頻組，其中每個(gè)視頻長(zhǎng)度為5秒，充滿張力，各不相同，略顯古怪，但是令人印象深刻。

I am Baaz

為了讓整個(gè)網(wǎng)站看起來(lái)創(chuàng)意十足，整個(gè)循環(huán)視頻背景是由5個(gè)專業(yè)的小視頻組成的，手繪字體和視頻背景相得益彰，排版設(shè)計(jì)也是精心制作而成。你可以在這個(gè)網(wǎng)站感受到專業(yè)的電影人的專業(yè)和熱忱。

Vesper Hotel

通過(guò)美妙如畫的視頻，Vesper酒店力圖為每個(gè)訪客呈現(xiàn)出它獨(dú)特的美和獨(dú)一無(wú)二的體驗(yàn)，讓你感受到它所提供的令人難忘的時(shí)光。

Tours Altitude

Tours Altitude 打破了首頁(yè)以單個(gè)循環(huán)視頻為核心的設(shè)計(jì)手法，不同主題的視頻同底部不同導(dǎo)航區(qū)塊聯(lián)系到了一起，光標(biāo)移動(dòng)到不同區(qū)塊的時(shí)候會(huì)展現(xiàn)出不同的內(nèi)容。

Umbrella Here

通過(guò)優(yōu)質(zhì)而細(xì)膩的循環(huán)視頻來(lái)展現(xiàn)產(chǎn)品的不同側(cè)面，從而讓用戶對(duì)產(chǎn)品有清晰而完整的認(rèn)知，這也是循環(huán)視頻的重要功能之一。

【那些充滿異域風(fēng)情的網(wǎng)頁(yè)設(shè)計(jì)】

《兼容并蓄！20個(gè)來(lái)自澳大利亞最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《狂拽酷炫！20個(gè)來(lái)自美國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《KEEP CALM & DESIGN！26個(gè)來(lái)自英國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《嚴(yán)謹(jǐn)而浪漫！20個(gè)來(lái)自德國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《情迷西班牙！20個(gè)來(lái)自西班牙最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《時(shí)尚雅致！25個(gè)來(lái)自法國(guó)最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》
《請(qǐng)多關(guān)照！20個(gè)來(lái)自日本最優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)》

原文地址：designmodo
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量105萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com