如何實(shí)現(xiàn)視差滾動(dòng)效果的網(wǎng)頁(yè)？

時(shí)間：2024-02-15 18:35:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-15 18:35:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何實(shí)現(xiàn)視差滾動(dòng)效果的網(wǎng)頁(yè)？：讓一個(gè)網(wǎng)站看起來(lái)酷炫，豐富，具有吸引力。你可以添加多種多樣的設(shè)計(jì)效果和技巧。而視差滾動(dòng)效果則是其中一個(gè)很不錯(cuò)的選擇。




視差滾動(dòng)，英文為Parallax Scrolling，是指多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。網(wǎng)頁(yè)設(shè)計(jì)中的視差效果的最常見(jiàn)的一種，就是用戶(hù)在向下滾動(dòng)頁(yè)面或跨頁(yè)面時(shí)可以創(chuàng)建3D滾動(dòng)效果。視差設(shè)計(jì)如果做得好，將會(huì)大大提升用戶(hù)體驗(yàn)，吸引更多的用戶(hù)。




以下為視差滾動(dòng)教程，并為大家整理了20多個(gè)視差滾動(dòng)網(wǎng)站設(shè)計(jì)。




一、例子




SmaShing

Spark

QQ瀏覽器




二、原理




傳統(tǒng)的網(wǎng)頁(yè)的文字、圖片、背景都是一起按照相同方向相同速度滾動(dòng)的，偶爾有一些背景固定的網(wǎng)頁(yè)。

顧名思義“視差滾動(dòng)”就是通過(guò)滾動(dòng)這個(gè)行為實(shí)現(xiàn)視覺(jué)上的層次錯(cuò)落的錯(cuò)覺(jué)，從而形成立體的運(yùn)動(dòng)效果。

其實(shí)分析各個(gè)優(yōu)秀的例子網(wǎng)站，不難發(fā)現(xiàn)其實(shí)原理一樣的，手法上也大同小異，都是通過(guò)控制多層的透明背景，在滾動(dòng)的時(shí)候不再是只向上運(yùn)動(dòng)，而是以不同的速度、不同的方向去運(yùn)動(dòng)，再結(jié)合現(xiàn)實(shí)世界的運(yùn)動(dòng)規(guī)律，從而達(dá)到很棒的視覺(jué)沖擊和交互




三、講解




先分析下SmaShing 這個(gè)相對(duì)簡(jiǎn)單的例子。

觀察此例子不難發(fā)現(xiàn)實(shí)現(xiàn)方法：最上層的頁(yè)面元素（文字、圖片）按照正常的方式滾動(dòng)，背景通過(guò)JS往下方運(yùn)動(dòng)，從而實(shí)現(xiàn)了視差滾動(dòng)

可以發(fā)現(xiàn)主體是由4個(gè)section標(biāo)簽組成的：







注意看屬性：

data-type 類(lèi)型，JS用來(lái)按類(lèi)型選取元素

data-speed 速度，用于儲(chǔ)存移動(dòng)速度，供JS調(diào)用

style="background-position: 50% 0px;"


注意看這個(gè)行內(nèi)屬性 background-position 用來(lái)控制背景的位置，這個(gè)就是本例子的關(guān)鍵所在

我們滾動(dòng)一段，通過(guò)firebug可以檢測(cè)到此屬性的變化







往下滾動(dòng)的時(shí)候，此屬性的值越來(lái)越小，我們都知道第二個(gè)參數(shù)代表Y軸方向，越小往下方偏移越多，從而看起來(lái)背景是往下方運(yùn)動(dòng)

下面我們看下作者是怎么通過(guò)JS控制的，附上源碼：




Js代碼

1. $(document).ready(function () {
2. // 讀取window
3. $window = $(window);
4. // 遍歷包含“data-type”的元素，讀取并設(shè)置Y偏移量、X位置、滾動(dòng)速度等參數(shù)
5. $('[data-type]').each(function () {
6. $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
7. $(this).data('Xposition', $(this).attr('data-Xposition'));
8. $(this).data('speed', $(this).attr('data-speed'));
9. });
10. // 遍歷符合 section[data-type="background"] 選擇器的元素
11. $('section[data-type="background"]').each(function () {
12. // 存儲(chǔ)一起基礎(chǔ)變量
13. var $self = $(this),
14. offsetCoords = $self.offset(),
15. topOffset = offsetCoords.top;
16. // 當(dāng)窗口滾動(dòng)時(shí)
17. $(window).scroll(function () {
18. // 通過(guò)計(jì)算滾動(dòng)條高度和窗口高度判斷當(dāng)前元素是否在視野中
19. if (($window.scrollTop() + $window.height()) > (topOffset) &&
20. ((topOffset + $self.height()) > $window.scrollTop())) {
21. // 以設(shè)定的速度滾動(dòng)背景
22. // 因?yàn)槲覀兪窍蛏蠞L動(dòng)，所以背景的yPos是負(fù)值
23. var yPos = -($window.scrollTop() / $self.data('speed'));
24. // 如果此元素有一個(gè)Y偏移，將其添加上
25. if ($self.data('offsetY')) {
26. yPos += $self.data('offsetY');
27. }
28. // 最終的背景位置
29. var coords = '50% ' + yPos + 'px';
30. // 滾動(dòng)背景
31. $self.css({ backgroundPosition: coords });
32. // 遍歷本節(jié)點(diǎn)中的其他元素
33. $('[data-type="sprite"]', $self).each(function () {
34. // 讀取data-type="sprite"規(guī)則的元素
35. var $sprite = $(this);
36. // 使用同樣的方法進(jìn)行滾動(dòng)
37. var yPos = -($window.scrollTop() / $sprite.data('speed'));
38. var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
39. $sprite.css({ backgroundPosition: coords });
40. });
41. // 遍歷需要滾動(dòng)的視頻
42. $('[data-type="video"]', $self).each(function () {
43. // 讀取data-type="video"規(guī)則的元素
44. var $video = $(this);
45. var yPos = -($window.scrollTop() / $video.data('speed'));
46. var coords = (yPos + $video.data('offsetY')) + 'px';
47. $video.css({ top: coords });
48. });
49. }; // in view
50. }); // window scroll
51. }); // each data-type
52. }); // document ready

四、總結(jié)和發(fā)散




通過(guò)分析上面的例子我們發(fā)現(xiàn)，其實(shí)就是通過(guò)JS去移動(dòng)背景，此例子只是反向滾動(dòng)了背景，已經(jīng)達(dá)到了不錯(cuò)的效果。

我們可以向多個(gè)方向去擴(kuò)展和發(fā)散：1.多層背景已不同的速度、不同的方向、不同的效果去滾動(dòng) 2.頁(yè)面上的元素可以用JS或jQuery去實(shí)現(xiàn)不同的效果，配合背景能達(dá)到很好的效果。




五、視差滾動(dòng)網(wǎng)站設(shè)計(jì)案例

1. Femme Fatale

Femme Fatale是一家專(zhuān)注于文化，奢侈品，社論和藝術(shù)的創(chuàng)意工作室。它包含了精彩的動(dòng)畫(huà)互動(dòng)頁(yè)面，可以很好的調(diào)動(dòng)訪客的情緒。當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，頁(yè)面背景會(huì)伴隨頁(yè)面滾動(dòng)條進(jìn)行切換，每個(gè)頁(yè)面的背景色各不相同，在頁(yè)面滾動(dòng)切換時(shí)，頁(yè)面文本會(huì)以不同的速度載入，和頁(yè)面圖像等其他元素形成視差滾動(dòng)。




Visit site

2. Every Last Drop

Every Last Drop是一個(gè)展示生活用水場(chǎng)景的網(wǎng)站，旨在呼吁關(guān)注地球水資源，節(jié)約水資源。設(shè)計(jì)師以等比例分割頁(yè)面進(jìn)度條，當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，您會(huì)看到各種不同的生活場(chǎng)景里水資源是如何被消耗的，并且展示水資源使用的占比等數(shù)據(jù)。每個(gè)場(chǎng)景的切換都帶有動(dòng)畫(huà)視差效果。在其“Universe”頁(yè)面還增加了3D視差滾動(dòng)效果。




Visit site.

3. Beer Camp

Beer Camp整個(gè)網(wǎng)站頁(yè)面劃分為5個(gè)頁(yè)面層，當(dāng)你滾動(dòng)時(shí)會(huì)有一種“一鏡到底”的感覺(jué)。并且它的視差滾動(dòng)效果非常與眾不同，它既不是水平也不是垂直的，而是一種平滑縮放的效果。當(dāng)你滾動(dòng)頁(yè)面時(shí)，各個(gè)層都可以連貫地依次放大到頁(yè)面最前端。加上明亮的配色和粗放的版式，創(chuàng)造出一種驚人的空間感。




Visit site.

4. Porsche Volution

Porsche Volution完全可以看出設(shè)計(jì)師對(duì)汽車(chē)的熱愛(ài)以及對(duì)保時(shí)捷品牌的濃厚興趣。整個(gè)頁(yè)面設(shè)計(jì)以視差滾動(dòng)照片的形式展示了保時(shí)捷的進(jìn)化，并且配有高雅的背景音樂(lè)，配色驚艷。屏幕左側(cè)有一個(gè)時(shí)間軸，向下滾動(dòng)時(shí)，可以清晰的看到保時(shí)捷的進(jìn)化歷程。




Visit site.

5. Spokes

Spokes Eclectic Pedicab Rides是一個(gè)提供停車(chē)和公共交通的即時(shí)解決方案的網(wǎng)站。這個(gè)網(wǎng)站號(hào)召綠色生活和經(jīng)濟(jì)生活，對(duì)以倡導(dǎo)騎車(chē)為中心的社區(qū)文化有極大的意義。該網(wǎng)站是漫畫(huà)風(fēng)格，滾動(dòng)頁(yè)面時(shí)會(huì)以不同進(jìn)度載入頁(yè)面元素，具有豐富的視差效果。頂部導(dǎo)航欄的設(shè)計(jì)也是一個(gè)亮點(diǎn)。




Visit site.

6. Hot Dot

Hot Dot和上面的視差例子又不盡相同，它是水平視差滾動(dòng)。頁(yè)面從左到右以平滑的3D視差效果推進(jìn)，頁(yè)面元素和純黑色背景搭配具有不錯(cuò)的美感。這個(gè)網(wǎng)站也是響應(yīng)移動(dòng)優(yōu)先設(shè)計(jì)的一個(gè)很好例子。頁(yè)面底部有可點(diǎn)擊的CTA，方便用戶(hù)訪問(wèn)。




Visit site.

7. Hobolobo

這也是一個(gè)水平視差滾動(dòng)效果網(wǎng)站，但它不同之處在于它更適用于觸摸設(shè)備。但你滑動(dòng)觸摸板時(shí)，頁(yè)面會(huì)從左向右移動(dòng)，以講故事的方式呈現(xiàn)頁(yè)面。頁(yè)面的頂部欄上有一個(gè)頁(yè)面列表，可與頁(yè)面一起滑動(dòng)以顯示您當(dāng)前位置。這個(gè)網(wǎng)站是完全漫畫(huà)形式的，最驚艷的是其3D視差效果。




Visit site.

8. Firewatch

Firewatch是一個(gè)荒野探險(xiǎn)類(lèi)的設(shè)計(jì)網(wǎng)站。該網(wǎng)站有6個(gè)移動(dòng)層組成，展現(xiàn)出頁(yè)面的豐富感和深度感。它的視差效果僅在第一個(gè)頁(yè)面使用，當(dāng)頁(yè)面滾動(dòng)時(shí)，元素向上推進(jìn)，營(yíng)造出一種3D效果，讓我想起《獅子王》里的經(jīng)典鏡頭。其他頁(yè)面都是平滑的靜態(tài)頁(yè)面，方便用戶(hù)讀取大量的文本信息。




Visit site.

9. Nizo App

這絕對(duì)是我的最?lèi)?ài)的視差滾網(wǎng)站之一。當(dāng)滾動(dòng)鼠標(biāo)時(shí)，所有UI元素以特定的不同節(jié)奏向頁(yè)面中央聚集，形成一個(gè)排版精致的整體。當(dāng)鼠標(biāo)滾回時(shí)，所有元素又從中心分離，形象生動(dòng)，極具動(dòng)感。整個(gè)頁(yè)面風(fēng)格干凈簡(jiǎn)單，采用了純色背景和粗文本。




Visit site.

10. Peugeot

這是一個(gè)很酷的網(wǎng)站，當(dāng)你滾動(dòng)鼠標(biāo)時(shí)，你會(huì)進(jìn)入一個(gè)精彩的故事情景里。它以視差滾動(dòng)的方式自動(dòng)播放漫畫(huà)故事，視差效果會(huì)根據(jù)故事情節(jié)會(huì)采用水平或垂直兩種展現(xiàn)方式。

Visit site.

11. Bunkai

這是一個(gè)日本網(wǎng)站。當(dāng)向下滾動(dòng)時(shí)，有一個(gè)可愛(ài)的卡通女孩在頁(yè)面上移動(dòng)，頁(yè)面會(huì)根據(jù)女孩的位置載入不同的信息。視差滾動(dòng)效果會(huì)在最后一個(gè)畫(huà)面結(jié)束，因此您可以閱讀所有信息而不會(huì)感到頭暈眼花。




Visit site.

12. Melanie Daveid

Melanie Daveid會(huì)帶給你一個(gè)數(shù)字世界的美妙體驗(yàn)。精致的細(xì)節(jié)展示和品牌指南使它在視覺(jué)上有驚人的效果。滾動(dòng)時(shí)，頁(yè)面被分成兩部分，左側(cè)頁(yè)面靜止，而右側(cè)則繼續(xù)滾動(dòng)，形成一種視差。




Visit site.

13. The Boat

這也是通過(guò)講故事的方式展示網(wǎng)站視差設(shè)計(jì)。The Boat共有6章，每章節(jié)以視差幻燈片形式演示了各個(gè)不同的情節(jié)，移動(dòng)視差層也有利于創(chuàng)造深度感。我個(gè)人也很喜歡這種素描風(fēng)格的頁(yè)面元素。




Visit site.

14. Dave Gamache

該視差滾動(dòng)網(wǎng)站采用純深色背景。當(dāng)你向下滾動(dòng)鼠標(biāo)時(shí)，界面右側(cè)有UI元素淡入淡出。此外，有一款手機(jī)會(huì)在你滾動(dòng)時(shí)頁(yè)面時(shí)有節(jié)奏的旋轉(zhuǎn)。




Visit site.

15. Assemble

Assemble是一個(gè)免費(fèi)的在線的作品集網(wǎng)站，您可以制作出精彩的作品集。首頁(yè)有18個(gè)美麗的主題可供選擇，這些主題以網(wǎng)格結(jié)構(gòu)排列，當(dāng)你向下滾動(dòng)時(shí)，每各主題會(huì)依次展示，伴隨輕微的跳動(dòng)載入。




Visit site.

16. Walking Dead

這個(gè)網(wǎng)站很有創(chuàng)意，以視差滾動(dòng)的方式講述一個(gè)驚悚的迷你僵尸電視劇。向下滾動(dòng)鼠標(biāo)，你會(huì)看到一個(gè)喪尸如何走向不同的場(chǎng)景。整個(gè)故事以水平視差滾動(dòng)自動(dòng)播放。里面的動(dòng)畫(huà)真的很棒，另外背景音樂(lè)也創(chuàng)造了一種令人毛骨悚然的氛圍。




Visit site.

17. Seymour Powel

該網(wǎng)站的設(shè)計(jì)師是一個(gè)多學(xué)科的設(shè)計(jì)研究團(tuán)隊(duì)，有戰(zhàn)略家，品牌專(zhuān)家，產(chǎn)品經(jīng)理，用戶(hù)體驗(yàn)師，用戶(hù)界面設(shè)計(jì)師和制造商。該網(wǎng)站有不同的圖層可以增加界面深度，并且采用平滑滾動(dòng)的視差效果。和Porsche Volution的設(shè)計(jì)比較接近，只是配色沒(méi)有那么大膽。




Visit site.

18. Youandigraphics

該網(wǎng)站是一個(gè)可以完全將您的設(shè)計(jì)理念變?yōu)楝F(xiàn)實(shí)的地方。設(shè)計(jì)師Irene DemetriI熱衷于創(chuàng)建美觀和直觀的響應(yīng)式網(wǎng)站，適用于各種類(lèi)型，各種尺寸設(shè)備的大型和小型項(xiàng)目。這個(gè)網(wǎng)站的視差沒(méi)有那么強(qiáng)烈。你單擊按鈕時(shí)，不同的元素會(huì)以反方向移動(dòng)，形成一種簡(jiǎn)單的視差。




Visit site.

19. Bagigia

想象一下，冬天里，懷抱一個(gè)熱水袋感覺(jué)怎么樣呢？這就Bagigia的設(shè)計(jì)師的靈感來(lái)源，創(chuàng)造一個(gè)關(guān)于熱水袋展示的網(wǎng)站。當(dāng)你向下滾動(dòng)時(shí)，第一個(gè)網(wǎng)頁(yè)頁(yè)面會(huì)像幕布一樣升上去，切換到一個(gè)可愛(ài)的熱水袋的頁(yè)面。該網(wǎng)站的視差效果也幾乎集中在第一頁(yè)。另外，滾動(dòng)時(shí)，底部有一個(gè)“拉鏈”進(jìn)度條，從左向右移動(dòng)，很生動(dòng)。




Visit site.

20. Anton＆Irene

我很喜歡這個(gè)網(wǎng)站的配色，溫暖干凈的界面。首頁(yè)的安東和艾琳穿著一件色彩鮮艷的衣服看起來(lái)很酷。當(dāng)向下滾動(dòng)時(shí)，他們則會(huì)退后一步，同時(shí)頁(yè)面載入文本信息。粗字體和整體色彩創(chuàng)造了一種美妙的視覺(jué)體驗(yàn)。如果你將鼠標(biāo)放在Anton＆Iren身上，就可以看到他們的臉部或一個(gè)鼻子。




Visit site.

21. Putzengel

向下滾動(dòng)鼠標(biāo)時(shí)，會(huì)以視差滾動(dòng)的方式連續(xù)顯示6個(gè)頁(yè)面。每一個(gè)頁(yè)面都是日常生活中我們做清潔的場(chǎng)景。頁(yè)面動(dòng)畫(huà)非常不錯(cuò)，尤其那個(gè)垃圾自動(dòng)進(jìn)入垃圾桶的動(dòng)畫(huà)，引人深思。




Visit site.

22. Beckett

該網(wǎng)站是您進(jìn)行創(chuàng)意設(shè)計(jì)的一個(gè)不錯(cuò)選擇，它是一個(gè)德國(guó)網(wǎng)站，但有多種語(yǔ)言可以切換。通過(guò)使用視差滾動(dòng)來(lái)增加了網(wǎng)頁(yè)插圖的豐富度。但個(gè)人覺(jué)得這個(gè)網(wǎng)站的元素有些許雜亂。




Visit site.

23. Lost Worlds Fairs

這也不是一個(gè)非常典型的視差滾動(dòng)效果網(wǎng)站，當(dāng)滾動(dòng)鼠標(biāo)，會(huì)有一個(gè)卡通人物進(jìn)入一個(gè)神秘的管道，管道上有無(wú)數(shù)的窗口，可以讓該人物在頁(yè)面滾動(dòng)時(shí)看到不同的場(chǎng)景。這個(gè)網(wǎng)站還是有一定的趣味性，看這個(gè)人物經(jīng)歷所有場(chǎng)景并最終到達(dá)他的目的地非常有趣。




Visit site.




以上就是Mockplus團(tuán)隊(duì)整理的一些視差滾動(dòng)網(wǎng)站設(shè)計(jì)例子。不知道是不是對(duì)您有所幫助呢？不要忘了使用Mockplus去進(jìn)行網(wǎng)頁(yè)視差原型設(shè)計(jì)哦。還沒(méi)有嘗試過(guò)的小伙伴，點(diǎn)擊https://www.mockplus.cn下載，相信你也可以做出同樣精彩的設(shè)計(jì)。歡迎交流。

相關(guān)閱讀：

在資金有限的情況下，創(chuàng)業(yè)公司如何找到合適的開(kāi)發(fā)師

普通程序員該如何進(jìn)階為全棧工程師？

網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)頁(yè)前端開(kāi)發(fā)我該選擇哪一個(gè)

什么樣的原型更受開(kāi)發(fā)歡迎 ？

進(jìn)階學(xué)習(xí)，如何無(wú)代碼設(shè)計(jì)一款美觀且實(shí)用的網(wǎng)站

2018年交互設(shè)計(jì)旅程中的7個(gè)設(shè)計(jì)趨勢(shì)

這9款小眾時(shí)尚的酒店網(wǎng)站設(shè)計(jì)，讓你不再戀家

收集網(wǎng)站用戶(hù)反饋的5個(gè)常用問(wèn)題

10個(gè)最新優(yōu)秀手機(jī)應(yīng)用界面設(shè)計(jì)實(shí)例

干貨！15個(gè)最新優(yōu)質(zhì)加載動(dòng)畫(huà)設(shè)計(jì)，讓等待成為一種享受

“手把手教你設(shè)計(jì)”-12個(gè)最佳手機(jī)APP界面設(shè)計(jì)教程

---