1. 程式人生 > >炫酷生動的迴圈視訊背景網頁設計實戰

炫酷生動的迴圈視訊背景網頁設計實戰

迴圈(Loop)是現代瀏覽器中HTML5視訊標籤下的布林屬性,包括IE9在內的主流瀏覽器都支援這一屬性。它能讓一個或者一系列視訊短片迴圈播放。開發者社群中,網頁設計師非常青睞這一功能,並且截至目前影響了許多專案,讓網站看起來更加絢麗和精彩。

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

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

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

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

從視訊的第一秒開始,Spacejunk 就將這個品牌獨特的印記印在使用者心頭,獨一無二的視覺設計和精緻入微的視訊影象令人流連忘返。專業的設計和強大的執行性配合著迴圈播放,迴圈視訊的作用機會被他們運用到了極致。

Eva

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

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

Gsacepoint 是一個典型的單頁網站,它主要的功能是引導使用者關注Fox電視臺的罪案劇。設計巧妙地通過三個子頁面和風格陰鬱的迴圈視訊背景來營造出陰謀的氛圍。

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

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

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

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

Trif

Trif 的設計看起來頗為先鋒,給人感覺非常的複雜。這種神祕而曖昧的視訊內容選取,很容易喚醒使用者對於網站內容的興趣。

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

Z+

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

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

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

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

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

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

Tours Altitude 打破了首頁以單個迴圈視訊為核心的設計手法,不同主題的視訊同底部不同導航區塊聯絡到了一起,游標移動到不同區塊的時候會展現出不同的內容。

通過優質而細膩的迴圈視訊來展現產品的不同側面,從而讓使用者對產品有清晰而完整的認知,這也是迴圈視訊的重要功能之一。