動效已經成為網站上常見的一種元素，每種元素給人們帶來的效果都不一樣，動效也是如此，是否能夠帶來優秀的用戶體驗，這些都有待商討。今天，果然網站設計小編就來說說，網頁設計中常見的動效中的“滾動動效”。

　　雖然滾動動效并不一定適合每個網站，但使用動效的網站通常都擁有有趣和優雅的體驗。今天，果然網站設計小編就搜集了一些動效設計較為突出的幾個網站與您分享，看看12個網站怎樣設計網頁滾動動效的？

這個網站你會看到它采用的滾動瀏覽動效非常柔和，整個布局當中，各種文本和CTA元素會隨著滾動逐步顯現。設計師在設計的時候，并沒有讓所有元素都默認隱去，而是讓絕大多數的圖片、背景以及裝飾元素都保持顯示，在滾動過程中，逐步顯現的是文本和CTA元素，這樣的設計很容易讓用戶被這些內容所吸引。

和第一個網站不同的地方在于，Twist采用了我們更常見的滾動瀏覽動效：頁面原本空無一物，隨著加載和滾動，所有的元素都逐步在白色的背景上逐步顯現。雖然有些元素會因為加載的原因加載沒有那么快，但是不會讓用戶等太久就會出現。Twist這種動效同樣保持著柔和自然的特點。

　這個YarnAPP的著陸頁的設計比起前面的兩個案例要相對復雜一點，頁面中采用了不同樣式的加載動效來呈現APP的各方面特性和賣點。隨著用戶向下滾動，用來呈現APP特點的界面圖會伴隨著不同類型的滾動瀏覽動效而出現，相互交替，營造出豐富多樣的瀏覽體驗。使整個頁面視覺設計都保持著簡約的特征，動效多樣反而不會讓人覺得花哨。

在所有的這些滾動瀏覽特效設計當中，Dashflow所采用的動效技術是最常見的。整個頁面采用了時下最流行的單頁式布局，這也使得滾動時候的動效大多都是沿著橫向或者縱向運動。這些動效雖然簡單，但是通過合理的搭配，一樣創造出流暢順滑、令人難忘的體驗。

　Quuu Promote這個網站的動效設計非常的克制，僅在CTA元素上使用。不能說這樣的設計是否轉化率更高，但是視覺上的效果是很明顯的。當你打開頁面向下滾動的時候，會發現僅有CTA按鈕是綠色的，并且它們在出現于頁面視野內時，左右輕微晃動，吸引用戶的注意力。頁面其他地方的元素都保持靜止，這種鮮明的對比使得CTA元素非常突出。

Qonto的首頁展示了一個成熟的滾動瀏覽動效設計作品應有的素質。整個網站使用的動效類型也不多，良好的視覺設計構成了它的基礎，從圖標、按鈕、裝飾元素到內容區塊，都隨著瀏覽而逐步加載、展現，這些動效的存在感都比較強，不是太微妙，但是也不會影響到瀏覽。

和前一個案例正好相反，Hike的官網為你展現了微妙的滾動動效是怎么設計的。頁面中靜態和動態元素雜糅，動態元素的動效運動速度很快，在你的視覺捕捉到它們的時候，基本上就停止運動了，讓你發覺卻又不帶來干擾。

Project Fi的介紹頁面采用了夢幻般的動效來強化整個體驗。隨著頁面的滾動，大的內容區塊之間會小幅度地加速運動，創造動態的視覺體驗，而其中所承載的圖標和扁平化的插畫，則會以更快的速度，從下方向上浮現。

　　元素的展現速度并不慢，幅度也控制得恰到好處，速度差則將信息的層次感得到了強化。有趣的地方在于，當你滾動到頁面底部，再向上滾動的時候，會發現動效的運動方向會正好反過來。

Base CRM的首頁是個很好的案例證明簡單的動效同樣可以創造出優秀的體驗。他們首頁上所采用的這種滾動漸現的動效是經過定制的，和其他的同類動效并不完全一樣。但是它依然很典型，不復雜，雖然看起來展現內容時候的幅度并不小，但是它對于體驗的影響并不大。整個網站的布局足夠簡約，空間留白也很多。如果他們的動效能夠加載得更快一點，就完美了。

　　作為一個APP的推廣頁面，Anylist的網頁設計可以算得上漂亮了。Anylist頁面中唯一一個運動的動效是你剛剛打開的時候，從底部運動到頂部的手機截圖，而當你向下滾動瀏覽的時候，頁面元素會由透明開始逐步顯現，并不會隨著滾動而運動。整個頁面的滾動動效設計的頗為有凝聚力。

　　和其他的滾動瀏覽動效不同，Ernest這個網站在這個合集當中，是獨樹一幟的。首頁采用了視差滾動的設計，同樣是單頁設計，但是頁面被明顯分割為幾個不同的部分，滾動會觸發動效加載下一個頁面中的元素，元素運動幅度都很大，頁面的定位感很強，不會因為滾動而停留在某個中間狀態。你可以使用側面的導航來快速跳轉到不同的部分，這也是單頁設計和視差滾動設計中常見的元素。

　Taxinet的首頁整個頁面都充分運用了動效技術，動效與圖標、文字、圖像、背景、甚至裝飾元素都緊密結合到了一起，雖然其中一些技術細節使用范圍并不大，但是這個數量的動效集中到一起，互補干擾，所創造的體驗還是非常有意思的。

　　果然網站設計小編溫馨提示：如果你喜歡這樣的設計，并且想運用到自己的網站當中來，那么最好確保每個動效都足夠快速、高效，才能達到這樣整齊劃一的效果。希望以上的分享，能夠對有需要的你有一定的幫助。如果你需要設計這樣的網頁，也可以聯系果然網絡。