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

1、明天睡覺

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

2、扭曲

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

3、紗的應用

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

4、DashFlow

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

5、Quuu促進

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

6、Qonto

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

7、徒步旅行

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

8、項目Fi

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

9、基地

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

10、AnyList

所有最好的移動應用都有自己的網站進行推廣。而最好的通常都有一些非常時髦的動畫風格。AnyList在一個頁面中混合了一些不同的技術。他們的頁眉圖像從截屏下面開始動畫，但這是頁面上唯一的“移動”動畫。所有其他的東西都會淡入到視圖中，所有這些都在動畫中使用了非常快的加載時間。這些技術在網站的其他地方被使用，這使它更有凝聚力。

11、歐內斯特

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

12、TaxiNet

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