網(wǎng)站設(shè)計中的視差效果，以不同速度移動圖層的概念，已經(jīng)在動畫中使用多年。Bear Grylls的官方網(wǎng)站在新的和有趣的方向上發(fā)揮了作用。背景山縮小到合適的位置，同時漸隱，使它們變得完全不透明，在頁面的背景中，文本"冒險"在漸隱時上升到山的后面。

網(wǎng)站設(shè)計中想要獲得更多鼓舞人心的視差效果，請查看我們的最佳CSS動畫指南以及如何編寫它們。

Bear Grylls網(wǎng)站設(shè)計是英國創(chuàng)意營銷機構(gòu)前哨的工作，目標受眾年齡在16歲到55歲之間，在全球擁有700多萬粉絲，他們面臨著一項艱巨的任務。

"網(wǎng)站設(shè)計中的主要特色是主頁；我們希望瀏覽用戶能直接跳到屏幕上，和貝爾一起冒險，"聯(lián)合創(chuàng)始人克里斯·威爾科克（Chris Wilcock）和創(chuàng)意總監(jiān)丹·威廉姆斯（Dan Williams）解釋說。"為了實現(xiàn)這一點，我們使用了一些巧妙的過渡，加上經(jīng)過編輯的視頻、戲劇性的圖像和網(wǎng)站上的整體語言。"

01.創(chuàng)建縮放效果

允許所有動畫內(nèi)容工作的結(jié)構(gòu)相對簡單，包裝器包含所有內(nèi)容，并隱藏任何溢出內(nèi)容。然后在頂部有三層div標簽。

02.啟動CSS

為了進行網(wǎng)站設(shè)計，背景漸變圖像將被添加到主體中，并設(shè)置為填充屏幕的大小。包裝器包含所有層，并隱藏內(nèi)容溢出，以便應用縮放效果。

03.定位每一層

接下來的代碼確保每一層都被絕對地定位在包裝器中，一個在另一個之上。它的大小填充了viewport的寬度和高度，因此圖像填充了屏幕。

04.添加文本

text類實際上只是添加了正確的圖像，并在使用將在最后一步中添加的moveUp關(guān)鍵幀將它動畫到合適的位置之前設(shè)置它的起始位置。

05.動畫第一座山

第一個山是離屏幕更遠的山，這將得到一個小的縮放，這將是動畫的。所有圖層的不透明度也被設(shè)置得很低，這樣它們就會出現(xiàn)在合適的位置。

06.為前景山制作動畫

前景的山和其他山幾乎是一樣的，只是比例更合適。兩座山的動畫都共享"定標器"關(guān)鍵幀。

07.添加關(guān)鍵幀動畫

現(xiàn)在創(chuàng)建了關(guān)鍵幀來指定它，在移動的結(jié)束狀態(tài)中，這個結(jié)束狀態(tài)將被保持在適當?shù)奈恢?。文本向上移動，山脈被縮小，以適應網(wǎng)站設(shè)計。