炫酷生動的循環視頻背景網頁設計實戰

 　　循環(Loop)是現代浏覽器中HTML5視頻標簽下的布爾屬性，包括IE9在內的主流浏覽器都支持這一屬性。它能讓一個或者一系列視頻短片循環播放。開發者社區中，網頁設計 師非常青睐這一功能，並且截至目前影響了許多項目，讓網站看起來更加絢麗和精彩。

　　從作品展示類的網站到移動端的專題頁，循環視頻 背景的運用范疇非常廣泛。網頁開發者們將5~10的視頻作為背景循環播放，而視頻內容通常會展現出某個主題，或者有目的性地展現達成某個目標的過程，呈現企業或者團隊的潛在實力。這種展現方式比起傳統的網頁設計 手法，更能挑起用戶的興趣，引人注意，豐富的信息量和多變的內容會讓整體的用戶體驗再上一級台階。雖然這些視頻拍攝起來非常的費神費力，也許你需要趴在地上拍攝一些場景，但是當網站出來之後，你會發現這些努力都是值得的。

　　如果你還是下不了決心，那麼一起來看看下面這些優秀的網頁設計 作品吧。克服重重障礙制作出的循環動態背景是如何震撼人心的。

　　Haigh and Hastings

　　擁有介紹功能的循環視頻 和看起來優雅簡約的導航結合到一起，其他產品則使用了高清圖片作為背景，同樣起到了卓有成效的導航作用。

　　Webgriffe

　　Webgriffe 使用循環視頻來支撐他們的品牌形象，一系列精心拍攝的短視頻被剪輯成短短的十幾秒，不僅介紹了品牌的特色，還用到位的拍攝手法營造出令人難忘的場景，循環播放給用戶強化品牌印象。視頻當中還通過一組工作流程的展示來呈現了他們的專業性。

　　Spacejunk

　　從視頻的第一秒開始，Spacejunk 就將這個品牌獨特的印記印在用戶心頭，獨一無二的視覺設計和精致入微的視頻圖像令人流連忘返。專業的設計和強大的執行性配合著循環播放，循環視頻的作用機會被他們運用到了極致。

　　Eva

　　毫無疑問這個充滿吸引力著陸頁是通過循環視頻來營造出充滿吸引力的界面的。設計師明智地將界面劃分為三個部分，在視覺上營造出趣味性和娛樂性，最後又落腳在工作流上。

　　Newrow

　　這裡的循環視頻被用作鼓勵那些熱愛生活的人，循環播放的視頻內容被劃分為兩個部分，創造性地展示了兩種生活方式的差異。

　　Gracepoint

　　Gsacepoint 是一個典型的單頁網站，它主要的功能是引導用戶關注Fox電視台的罪案劇。設計巧妙地通過三個子頁面和風格陰郁的循環視頻背景來營造出陰謀的氛圍。

　　Pastamancini

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

　　Dalbello

　　充滿了活力的雪山場景和運動的氛圍被幾個短視頻完全展現了出來，為了烘托出視頻內容，網頁在配色和視覺元素的選取上也獨具匠心，烘托出了雪山和運動的主題。

　　Distill

　　Distill 項目是一個為創意工作者而准備的項目，提供個人和商用的創意短視頻。歡迎頁面中漂亮的視頻景觀不僅有歡迎之用，而且也是體現整個項目價值的重要組成部分。

　　Drygital

　　打開 Drygital 的頁面，映入眼簾的短視頻充滿了動態和炫目的效果，褪色特效讓視頻同浮動於視頻之上的LOGO看起來對比明顯。巧妙地視頻色調調整讓整個網站的視覺元素相輔相成。

　　Trif

　　Trif 的設計看起來頗為先鋒，給人感覺非常的復雜。這種神秘而暧昧的視頻內容選取，很容易喚醒用戶對於網站內容的興趣。

　　Mr. Stefan Braun’s

　　如何借助短視頻展現出積極向上地情緒，營造出有趣而好玩的氛圍?看看這個網站你就會知道這樣的循環視頻背景要怎麼拍，如何剪輯才行。

　　Z+

　　借助循環視頻來展現團隊工作流程，可以說是這類視頻設計的一個重要分支。Z+ 的官網也是這麼玩兒的，不過它們還在視頻中植入了好幾個微妙的暗示作為彩蛋。

　　Boo Cat Club

　　Boo Cat 俱樂部首頁所使用的視頻傳達出的愉悅氛圍同網站的口號“鮮活&生動”相互呼應，這種設計讓用戶和網站在情緒上更容易相互呼應。

　　Triptych

　　網站首頁參考了三聯畫的結構來營造布局，靜態的畫面之下隱藏了精彩而細膩的循環視頻。它們呼應了三聯畫的藝術主題，還借助技術讓這種藝術形式擁有了更強的生命力。

　　Primal

　　整個首頁是基於一個包含了若干不同含義短視頻的循環視頻組，其中每個視頻長度為5秒，充滿張力，各不相同，略顯古怪，但是令人印象深刻。

　　I am Baaz

　　為了讓整個網站看起來創意十足，整個循環視頻背景是由5個專業的小視頻組成的，手繪字體和視頻背景相得益彰，排版設計也是精心制作而成。你可以在這個網站感受到專業的電影人的專業和熱忱。

　　Vesper Hotel

　　通過美妙如畫的視頻，Vesper酒店力圖為每個訪客呈現出它獨特的美和獨一無二的體驗，讓你感受到它所提供的令人難忘的時光。

　　Tours Altitude

　　Tours Altitude 打破了首頁以單個循環視頻為核心的設計手法，不同主題的視頻同底部不同導航區塊聯系到了一起，光標移動到不同區塊的時候會展現出不同的內容。

　　Umbrella Here

　　通過優質而細膩的循環視頻來展現產品的不同側面，從而讓用戶對產品有清晰而完整的認知，這也是循環視頻的重要功能之一。