動畫效果在網(wǎng)站首頁和網(wǎng)站引導(dǎo)頁上是非常常見的，但在設(shè)計界，人們并不總是談?wù)撍鼈?，因?quot;視覺動畫"的概念并不是很多。使用滾動視圖這個短語是因為它看起來是一個準(zhǔn)確的描述。當(dāng)你向下滾動頁面時，新的動畫元素就會出現(xiàn)。它不是一種適用于每個網(wǎng)站的技術(shù)，但它確實在某些布局中添加了很好的觸摸。在這里整理了一些喜歡的動畫來展示這些滾動到視圖的動畫是如何工作的以及為什么你可以自己使用它們。

1、明天睡覺

在"明日睡眠"網(wǎng)站上，你會發(fā)現(xiàn)一些相當(dāng)溫和的動畫效果。這些將不同的文本片段和CTAs文件淡入布局中。有趣的是，即使在第一個滾動條上，大部分的圖像和背景區(qū)域也是完全可見的。許多網(wǎng)站使用淡入動畫來顯示圖像和截圖，同時保持文本可見。這一細(xì)微的差別有助于在文本逐漸消失時引起注意，這是吸引瀏覽者注意力的好方法。

2、扭曲

經(jīng)常看到的另一種技術(shù)是將頁面的大部分內(nèi)容用于滾動動畫。例如，Twist應(yīng)用程序主頁包含不同的頁面段和文本塊，這些文本塊在滾動條上動態(tài)顯示。它們有一個非常柔軟的褪色效果，所以它們是顯而易見的，但不太苛刻。有些游客可能會對延誤感到惱火，但我認(rèn)為不會太長。另外，它只有一次動畫，所以如果你點擊頁面底部，所有動畫都完成了。

3、紗的應(yīng)用

要了解更復(fù)雜的動畫，請查看紗線應(yīng)用程序著陸器。這個有多部分的動畫，甚至從不同角度來看的元素。一些截圖演示圖像向上動畫，同時伴隨的文本/BG模式向下動畫到視圖中。這種交替的風(fēng)格是非常獨特的，不是我經(jīng)?？吹降?。不過，登陸頁面也非常簡單，這里沒有什么吸引人的地方。在這種情況下，改變動畫效果很好。

4、DashFlow

在所有這些例子中，認(rèn)為DashFlow使用最常用的動畫技術(shù)。這個著陸器將圖像和文本一起動畫到視圖中。它非常簡單，并且使用單列布局，因此所有內(nèi)容都是直線向下的。這個設(shè)計本身并沒有什么特別之處，除了在卷軸上非常明確的動畫。一個偉大的風(fēng)格，如果你有一個類似的網(wǎng)站，并想保持動畫簡單。

5、Quuu促進(jìn)

Quuu推廣將動畫保持在最低限度，只在CTA區(qū)域使用。不能說這會增加轉(zhuǎn)化率，但這似乎是我們的目標(biāo)。當(dāng)你第一次加載頁面時，頂部的頁眉會在CTA上顯示一個傾斜的動畫。當(dāng)你向下滾動時，你會注意到頁面的其余部分是靜態(tài)的。但在底部有一個最后的CTA在頁腳之上，它也是動畫和運行同樣的傾斜動畫。去顯示你可以有不運行在整個頁面上的滾動動畫效果。

6、Qonto

Qonto的主頁上有一個有趣的關(guān)于滾動到視圖的動畫。它在整個網(wǎng)站上使用相同類型的動畫，并從側(cè)面對單個項目進(jìn)行動畫處理。對于大多數(shù)頁面，這包括圖標(biāo)部分，在一些解釋應(yīng)用程序特性的內(nèi)容上面有一個小圖形。不太微妙也不太明顯。另外，你還可以在標(biāo)題中找到一些其他的動畫樣式，以及一些BG圖片，它們會逐漸消失。這個頁面就是web動畫的一個極好的例子。

7、徒步旅行

關(guān)于一個微妙的動畫例子，請查看Hike。它們的頁面在動畫元素和固定元素之間交替。但是動畫效果很快，所以你不會因為等待可觀看的內(nèi)容而感到煩惱。這是我對滾動到動畫效果的偏好。這一直是一種很好的技術(shù)，但時機需要迅速和切中要害。沒有人愿意等待內(nèi)容出現(xiàn)，而且Hike很清楚地了解這一點。

8、項目Fi

如果有人知道偉大的用戶體驗，那就是谷歌。在他們所有的產(chǎn)品中都有大量的首頁面，Project Fi就是一個很好的例子。這些只適用于圖標(biāo)，它們不會淡出到視圖中，而是從頁面的下方彈出。當(dāng)你滾動的時候，你會發(fā)現(xiàn)每個小區(qū)域的圖標(biāo)都可以滑動到視圖中。這是一個相當(dāng)微妙的效果，但它為設(shè)計增加了一些活力。它僅僅是基于瀏覽者在頁面上的位置，所以如果你滾動到頂部，向下移動，你會得到同樣的動畫效果。

9、基地

基本的CRM主頁是一個很好的例子，簡單的動畫在工作。這個網(wǎng)站使用自定義動畫效果來移動圖像向上和進(jìn)入觀眾的視線。根據(jù)我每天看到的首頁面的數(shù)量，這是我所期望的非常典型的。這并不是一個復(fù)雜的動畫重建，也不會對體驗產(chǎn)生太大的影響。我希望動畫能更快地加載。但除此之外，我認(rèn)為這是一個很好的例子，在滾動中動畫圖像，并以一個非常干凈的布局引導(dǎo)。

10、AnyList

所有最好的移動應(yīng)用都有自己的網(wǎng)站進(jìn)行推廣。而最好的通常都有一些非常時髦的動畫風(fēng)格。AnyList在一個頁面中混合了一些不同的技術(shù)。他們的頁眉圖像從截屏下面開始動畫，但這是頁面上唯一的"移動"動畫。所有其他的東西都會淡入到視圖中，所有這些都在動畫中使用了非?？斓募虞d時間。這些技術(shù)在網(wǎng)站的其他地方被使用，這使它更有凝聚力。

11、歐內(nèi)斯特

歐內(nèi)斯特的頁面風(fēng)格與我之前提到的其他登錄頁面有些不同，它使用視差滾動動畫在具有不同部分的頁面布局上創(chuàng)建動作。它們根據(jù)滾動的方向而變化，無論你向上還是向下移動，以什么速度移動。根據(jù)頁面的不同部分，它們的強度也有所不同。您可以使用側(cè)邊點導(dǎo)航菜單進(jìn)行導(dǎo)航，這可以快速地在頁面上跳轉(zhuǎn)到不同的區(qū)域。這是你經(jīng)常在視差頁面上看到的為數(shù)不多的技術(shù)之一，它當(dāng)然有助于歐內(nèi)斯特從人群中脫穎而出。

12、TaxiNet

想要一睹整個網(wǎng)頁動畫的風(fēng)采，請訪問TaxiNet網(wǎng)站，它是一個基于滾動的動畫效果的smorgasbord，與圖標(biāo)、文本、圖像甚至背景樣式綁定在一起。單獨的頁面背景顏色與用戶一起觀看，絕對不是一種典型的技術(shù)，但肯定是一個有趣的技術(shù)。如果您喜歡這種樣式，您完全可以將類似的方法應(yīng)用到您自己的登錄頁面。只要確保你的動畫流暢快速，因為沒有人愿意等待你的整潔的動畫加載。但是如果你正確地做了，這些滾動到視圖的元素會給任何登陸頁添加一個好的效果。