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

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

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

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

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

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

02.啟動(dòng)CSS

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

03.定位每一層

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

04.添加文本

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

05.動(dòng)畫(huà)第一座山

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

06.為前景山制作動(dòng)畫(huà)

前景的山和其他山幾乎是一樣的，只是比例更合適。兩座山的動(dòng)畫(huà)都共享“定標(biāo)器”關(guān)鍵幀。

07.添加關(guān)鍵幀動(dòng)畫(huà)

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