10個頂級滾動特效網站，教你如何讓網站動起來

+ 查看更多

 

隨著HTML5和CSS3建站技術的發展，動畫效果又重新成為設計師的重要"武器"之一。為什么動畫效果一直廣受歡迎？這是因為在網站中使用動畫效果可以使頁面更加生動、有趣，可以給網站增添一些個性化色彩，可以提供給用戶預期之外的效果，讓用戶體驗更愉悅。不過網頁中的動畫效果也有很多種形式，滾動瀏覽動效就是其中最常見、最有用的一種。滾動瀏覽動效，顧名思義，就是指用戶滾動頁面進行瀏覽時出現的動畫效果。雖然滾動瀏覽動效并不一定適用于每一個網站，但它在不少網站中都發揮了自己的的獨特魅力。在今天這篇文章中，小飛整理了10個應用了滾動瀏覽動效的優秀網站。

 

 

 

這個網站使用的滾動瀏覽效果十分柔和，當用戶滾動頁面時，各種文本和CTA按鈕會緩慢呈現，給人一種優雅、自然的感覺。這也正是網站設計的策略所在，將網站上大多數的圖片、背景、裝飾元素保持可見，而給文本元素和CTA按鈕（網站的核心內容）設置逐漸呈現的動畫效果，這樣一來，用戶在瀏覽過程中更容易注意到這些帶有動效的內容。

 

 

 

 

和第一個網站不同的是，Twist網站采用了平時最常見的滾動瀏覽特效，也就是網站頁面一片空白，所有元素都會隨著頁面的滾動逐步顯現。雖然有些圖片或其他元素不會那么快加載出來，但也不會讓用戶等待太久。Twist上面的滾動瀏覽特效同樣保持著柔和、自然的特點。

 

 

 

 

Yarn App網站的滾動瀏覽動效要比前面兩個網站更加復雜一點。隨著用戶向下滾動網頁，用來呈現APP特點的界面圖會伴隨著不同類型的滾動瀏覽動效出現，相互交替，營造出豐富多樣的瀏覽體驗。不過由于整個網站在視覺設計上都比較簡約，多樣的動效也不會讓用戶覺得花哨。

 

 

 

 

在所有的網站案例中，Dashflow所采用的滾動瀏覽動效可以說是最簡單的了。由于網站頁面采用了時下流行的單頁式布局，其中的滾動動效大多是沿著橫向或縱向運動的。雖然這些動效十分簡單，但只要搭配合理，它們一樣可以給用戶提供順暢、難忘的瀏覽體驗。

 

 

 

 

Quuu Promote在網站上也沒有使用多少動效，最引人注意的要數CTA按鈕上的動畫效果了。當你滾動頁面時，你會發現CTA按鈕緩慢呈現在視野內，并左右晃動，這與頁面靜止的其他元素形成了鮮明的對比，再加上CTA按鈕上顯眼的綠色，讓人想不注意到它都難。

 

 

 

 

Qonto網站的首頁上展示了一個十分成熟的滾動瀏覽動效。整個網站使用的動效類型并不多，當用戶滾動頁面時，圖標、按鈕、裝飾元素、內容區塊都會逐步加載出現，不過這些出現的元素仍會浮動在頁面上，這種微妙的波動存在感很強，很能吸引用戶的注意力，但它也不會影響到用戶的瀏覽點擊。

 

 

 

 

Hike網站的滾動瀏覽動效也秉持著微妙的原則。頁面中靜態元素和動態元素相結合，一些使用了動效的元素有圖片、文字、標題文字下面的分割線等。動效細節上處理的也很妥當，當用戶視線捕捉到它們時， 它們基本就停止運動了，這樣既方便用戶察覺又不會帶來干擾。

 

 

 

 

Google的Project Fi在介紹頁面上使用夢幻般的動效來強化整個體驗。當用戶滾動頁面時，大的內容區塊比如圖片等會小幅度地加速運動，而其中承載的圖標、扁平化插畫等則會以更快的速度從下方浮現。元素呈現的速度并不慢，運動幅度也控制的很好，速度差更突出了信息的層次感，這樣用戶在瀏覽獲取信息時也更加清晰。這個網站還有一個有趣的地方在于，當你滾動到頁面底部，再向上滾動時，網頁中的圖片區塊、圖標、扁平化插畫等又會朝著相反的方向運動。

 

 

 

 

相對前面的所有網站來說，Ernest網站使用的動效絕對是獨樹一幟的。它在首頁使用了視差滾動的設計，雖然是單頁設計，但頁面卻被分割成幾個不同的部分，用戶滾動頁面會直接觸動下一個頁面中元素，元素運動的幅度比較大。還有，頁面的定位很準確，不會滾動時停留在某個兩個頁面中間位置的狀況。用戶還可以點擊側面的導航條快速跳轉到不同的頁面，這也是單頁設計和視差滾動設計中常見的元素。

 

 

 

 

Taxinet幾乎在網頁的每一處都使用了動畫效果，不管是圖標、文字、圖像、背景還是裝飾元素。雖然其中很多動效幅度不是很大，但動效的數量卻很多。不過網站嚴格控制了各種動效的速度，讓它們看上去更加整齊劃一，以給用戶帶來有趣、生動的瀏覽體驗。如果你對這種類型的設計很感興趣，也想在自己的網站中運用，最好確保每個動效都足夠快速、高效，避免出現凌亂的效果。

 

 

 

從上面這些栗子中我們可以看出，在網頁中使用滾動瀏覽動效沒有一條標準的規則。網頁中的滾動瀏覽動效可以用在多種元素上，也可以用在單個元素上；動效的幅度可以很大，也可以很微妙；動效運動方向可以是橫向的，也可以是縱向的。其實，具體如何使用滾動瀏覽動效還是取決于站長們想要通過動效實現什么樣的目的，需要根據網站的實際狀況作出選擇。上面10個網站在使用滾動動效時都有自己的側重點，大家可以好好學習，適當參考一下。

 

快來起飛頁自助建站平臺做一個響應式網站吧！