- 網頁設計中的視差滾動
- 首頁
- 背景與介紹
- 概念
- 網頁設計與視差滾動
- CSS技巧
- JavaScript技巧
- jQuery技巧
- Bootstrap技巧
- 結論
網頁設計與視差滾動
本章討論網頁設計的概念以及在網頁設計中使用視差滾動的優勢。
網頁設計背景
自20世紀初以來，由於數字媒體的興起，紙質媒體陷入了激烈的競爭。數字媒體包括我們在網際網路上看到的內容，以及隨之而來的相關雜誌。
您作為每週/每月訂閱的一部分收到的新聞通訊也包含在數字媒體中。主要地，數字媒體嚴重依賴於移動裝置和桌上型電腦裝置。當您可以在手機（手持裝置）以及桌上型電腦裝置上檢視內容時，這會產生差異。內容在任一裝置上的顯示方式，都體現了一種特定的內容設計風格。
這種設計風格被稱為網頁設計。從設計或編碼的角度來看，當網頁設計師著手構建網頁時，他/她也會考慮到移動裝置。
根據維基百科，網頁設計包含許多不同的技能和學科，涉及網站的製作和維護。其中一項技能是為使用者設計具有影響力的體驗。網頁設計滿足這種體驗，並提供了一種組織頁面內容的方式，併為其提供不同的樣式。
網頁設計包括 - 介面設計、圖形設計以及使用某些標準編寫程式碼。這項工作可以由一個人完成，也可以由一個團隊完成。
市場上有很多工具可以簡化這項工作，但是，網頁外觀的建立則取決於個人的創意技能。
現代網頁設計
隨著技術的進步，知識呈爆炸式增長。網際網路已成為一個事物，它極大地提高了我們的生活質量。在任何給定時間，普通網際網路使用者都在處理越來越多的資訊。這些資訊可以是臺式計算機上的網站，也可以是手持裝置上的網站；平板電腦或手機。
儘管如此多的資訊試圖吸引使用者的注意力，但很明顯，作為設計網頁體驗的人，只有3秒的時間來傳遞資訊。
如何處理這個問題？傳遞資訊至關重要，因為它是任何網頁設計的源頭。您希望構建一個能夠傳達資訊的網站，同時它也必須吸引使用者並使其堅持內容。這確實是一項艱鉅的任務。
考慮到任何給定網頁內容的廣泛工作範圍，越來越多的人正在進入網頁設計領域。創意網頁設計師因其創造良好使用者體驗的驚人才能而成為人們關注的焦點。網頁設計師目前可能會在營銷/廣告公司找到工作，或者自己創業，深入網頁設計領域。
美觀性是網頁上給定內容的關鍵。這意味著網頁設計師必須瞭解設計、顏色、間距等原則和基礎。越來越多的使用者每天都能看到高質量的網頁內容。很明顯，人們會將當前的網頁或網站與幾小時或幾分鐘前訪問過的網站進行比較。內容的排序，加上良好的圖形和顏色，使許多獨立的橫幅/頁面在網際網路上變得流行起來。
示例
讓我們以一個簡單的圖形為例。網際網路上有許多圖形，稱為表情包。它們是帶有嵌入圖形中的某些文字的簡單圖形交換格式 (GIF) 影像。這些表情包根據世界某地的近期事件在網際網路上廣泛傳播。如果我們看這個例子，它們唯一的吸引力就是圖形和一些相關或不相關的文字。
儘管如此，它還是獲得瞭如此巨大的普及，這讓人們思考網際網路上令人驚歎的可能性。
因此，要使網頁設計有效，創意和傳達資訊的方法都扮演著重要的角色。
需要注意的是，成功的網頁是網頁設計和網頁開發的結合。根據目前的市場趨勢，除了網頁設計師外，團隊中還需要一名網頁開發人員。網頁設計師將始終尋找靈感並利用其創意來建立圖形和相關的配色方案。而網頁開發人員將利用其編碼技能將圖形和配色方案在網站上生動地呈現出來。
網頁設計師也應該具備編寫程式碼的知識，以便使預期的圖形或配色方案可供網頁開發人員使用。像記事本這樣的簡單應用程式中的簡單程式碼可以幫助網頁設計師在網頁開發中佔據主導地位。
使用視差滾動
視差滾動屬於網頁設計師和網頁開發人員的工作範圍。網頁設計師可能會使用 InVision、UXPin 等工具建立視差滾動的效果，以向網頁開發人員傳達滾動的預期行為。此外，網頁開發人員將利用其技能建立視差滾動效果。這可以透過不同的 JavaScript、CSS 和 jQuery 技巧來實現。下一章將詳細介紹每種方法。
根據上一節中給出的定義，視差滾動是一種技術，當滾動時，背景內容以與前景內容不同的速度移動。
一個建立視差滾動效果的簡單 CSS 技術顯示在這個網站上 - 城市漫步。
如您在上面的螢幕截圖中看到的，螢幕中央的手機在您滾動兩次後會更改內容。此外，請觀察在第一次滾動時，帶有手機的背景會發生變化。
這種過渡讓您感覺手機一直處於其位置，而背景隨著您向下滾動而發生變化。這種效果稱為視差滾動效果。您知道您正在向下滾動，因為螢幕右側有一些點作為螢幕指示器。
視差滾動的首次使用是在舊的電腦遊戲中。其中，當角色移動速度快於背景時，固定的背景影像會以較慢的速度移動。這些遊戲的一些例子 - 迪士尼的阿拉丁和迪士尼的獅子王。這些遊戲分別於 1993 年和 1994 年推出。
雖然它確實起源於遊戲，但目前，許多網頁設計師都在強調這種效果，以讓他們的受眾喜歡他們的網站。視差滾動的優勢從網站擴充套件到移動網站。
這些網站，一旦使用視差滾動為桌面版本設計，就會新增支援移動螢幕的程式碼。
視差滾動在網頁和移動裝置中的優勢
在本節中，我們將從以下討論的各個角度討論使用視差滾動的優勢：
從受眾的角度
視差滾動與趣味元素相關。正如您在上面的示例中看到的，隨著使用者從不同的螢幕滾動，傳達數千字的資訊變得更容易。
如果我們考慮第一次使用該網站的使用者，每次滾動都與好奇心相關。因此，它不僅豐富了網站的體驗，還增加了使用者在首次訪問網站時花費更多時間的可能性。
隨著使用者對滾動的興趣增加，使用者參與度比例也顯著提高。
使用者不必深入思考如何獲取資訊，因為它以更明顯的方式提供。
在某些情況下，您可以透過在螢幕上為其他專案（例如徽標或選單圖示）新增動畫，來講述有關您提供的產品/服務的故事。
從技術的角度
一旦您為桌面版本實現了視差滾動，就可以很容易地將相同的框架用於移動網站或螢幕。
由於程式碼片段簡單且可重用，如果您是營銷機構或網站服務提供商公司，這在收集新客戶時變得輕而易舉。
視差滾動的知識伴隨著對 CSS、JavaScript 等前端框架的更多專業知識。