化9068065.png)
化1754442.png)
化白色2686469.png)
TEL：
動畫效果在網(wǎng)站首頁和網(wǎng)站引導頁上是非常常見的，但在設計界，人們并不總是談論它們，因為“視覺動畫”的概念并不是很多。使用滾動視圖這個短語是因為它看起來是一個準確的描述。當你向下滾動頁面時，新的動畫元素就會出現(xiàn)。它不是一種適用于每個網(wǎng)站的技術，但它確實在某些布局中添加了很好的觸摸。在這里整理了一些喜歡的動畫來展示這些滾動到視圖的動畫是如何工作的以及為什么你可以自己使用它們。
1、明天睡覺
在“明日睡眠”網(wǎng)站上，你會發(fā)現(xiàn)一些相當溫和的動畫效果。這些將不同的文本片段和CTAs文件淡入布局中。有趣的是，即使在第一個滾動條上，大部分的圖像和背景區(qū)域也是完全可見的。許多網(wǎng)站使用淡入動畫來顯示圖像和截圖，同時保持文本可見。這一細微的差別有助于在文本逐漸消失時引起注意，這是吸引瀏覽者注意力的好方法。
2、扭曲
經(jīng)?？吹降牧硪环N技術是將頁面的大部分內(nèi)容用于滾動動畫。例如，Twist應用程序主頁包含不同的頁面段和文本塊，這些文本塊在滾動條上動態(tài)顯示。它們有一個非常柔軟的褪色效果，所以它們是顯而易見的，但不太苛刻。有些游客可能會對延誤感到惱火，但我認為不會太長。另外，它只有一次動畫，所以如果你點擊頁面底部，所有動畫都完成了。
3、紗的應用
要了解更復雜的動畫，請查看紗線應用程序著陸器。這個有多部分的動畫，甚至從不同角度來看的元素。一些截圖演示圖像向上動畫，同時伴隨的文本/BG模式向下動畫到視圖中。這種交替的風格是非常獨特的，不是我經(jīng)?？吹降?。不過，登陸頁面也非常簡單，這里沒有什么吸引人的地方。在這種情況下，改變動畫效果很好。
4、DashFlow
在所有這些例子中，認為DashFlow使用最常用的動畫技術。這個著陸器將圖像和文本一起動畫到視圖中。它非常簡單，并且使用單列布局，因此所有內(nèi)容都是直線向下的。這個設計本身并沒有什么特別之處，除了在卷軸上非常明確的動畫。一個偉大的風格，如果你有一個類似的網(wǎng)站，并想保持動畫簡單。
5、Quuu促進
Quuu推廣將動畫保持在最低限度，只在CTA區(qū)域使用。不能說這會增加轉化率，但這似乎是我們的目標。當你第一次加載頁面時，頂部的頁眉會在CTA上顯示一個傾斜的動畫。當你向下滾動時，你會注意到頁面的其余部分是靜態(tài)的。但在底部有一個最后的CTA在頁腳之上，它也是動畫和運行同樣的傾斜動畫。去顯示你可以有不運行在整個頁面上的滾動動畫效果。
6、Qonto
Qonto的主頁上有一個有趣的關于滾動到視圖的動畫。它在整個網(wǎng)站上使用相同類型的動畫，并從側面對單個項目進行動畫處理。對于大多數(shù)頁面，這包括圖標部分，在一些解釋應用程序特性的內(nèi)容上面有一個小圖形。不太微妙也不太明顯。另外，你還可以在標題中找到一些其他的動畫樣式，以及一些BG圖片，它們會逐漸消失。這個頁面就是web動畫的一個極好的例子。
7、徒步旅行
關于一個微妙的動畫例子，請查看Hike。它們的頁面在動畫元素和固定元素之間交替。但是動畫效果很快，所以你不會因為等待可觀看的內(nèi)容而感到煩惱。這是我對滾動到動畫效果的偏好。這一直是一種很好的技術，但時機需要迅速和切中要害。沒有人愿意等待內(nèi)容出現(xiàn)，而且Hike很清楚地了解這一點。
8、項目Fi
如果有人知道偉大的用戶體驗，那就是谷歌。在他們所有的產(chǎn)品中都有大量的首頁面，Project Fi就是一個很好的例子。這些只適用于圖標，它們不會淡出到視圖中，而是從頁面的下方彈出。當你滾動的時候，你會發(fā)現(xiàn)每個小區(qū)域的圖標都可以滑動到視圖中。這是一個相當微妙的效果，但它為設計增加了一些活力。它僅僅是基于瀏覽者在頁面上的位置，所以如果你滾動到頂部，向下移動，你會得到同樣的動畫效果。
9、基地
基本的CRM主頁是一個很好的例子，簡單的動畫在工作。這個網(wǎng)站使用自定義動畫效果來移動圖像向上和進入觀眾的視線。根據(jù)我每天看到的首頁面的數(shù)量，這是我所期望的非常典型的。這并不是一個復雜的動畫重建，也不會對體驗產(chǎn)生太大的影響。我希望動畫能更快地加載。但除此之外，我認為這是一個很好的例子，在滾動中動畫圖像，并以一個非常干凈的布局引導。
10、AnyList
所有最好的移動應用都有自己的網(wǎng)站進行推廣。而最好的通常都有一些非常時髦的動畫風格。AnyList在一個頁面中混合了一些不同的技術。他們的頁眉圖像從截屏下面開始動畫，但這是頁面上唯一的“移動”動畫。所有其他的東西都會淡入到視圖中，所有這些都在動畫中使用了非常快的加載時間。這些技術在網(wǎng)站的其他地方被使用，這使它更有凝聚力。
11、歐內(nèi)斯特
歐內(nèi)斯特的頁面風格與我之前提到的其他登錄頁面有些不同，它使用視差滾動動畫在具有不同部分的頁面布局上創(chuàng)建動作。它們根據(jù)滾動的方向而變化，無論你向上還是向下移動，以什么速度移動。根據(jù)頁面的不同部分，它們的強度也有所不同。您可以使用側邊點導航菜單進行導航，這可以快速地在頁面上跳轉到不同的區(qū)域。這是你經(jīng)常在視差頁面上看到的為數(shù)不多的技術之一，它當然有助于歐內(nèi)斯特從人群中脫穎而出。
12、TaxiNet
想要一睹整個網(wǎng)頁動畫的風采，請訪問TaxiNet網(wǎng)站，它是一個基于滾動的動畫效果的smorgasbord，與圖標、文本、圖像甚至背景樣式綁定在一起。單獨的頁面背景顏色與用戶一起觀看，絕對不是一種典型的技術，但肯定是一個有趣的技術。如果您喜歡這種樣式，您完全可以將類似的方法應用到您自己的登錄頁面。只要確保你的動畫流暢快速，因為沒有人愿意等待你的整潔的動畫加載。但是如果你正確地做了，這些滾動到視圖的元素會給任何登陸頁添加一個好的效果。
