- 網頁設計中的視差滾動
- 首頁
- 背景與介紹
- 概念
- 網頁設計與視差滾動
- CSS技巧
- JavaScript技巧
- jQuery技巧
- Bootstrap技巧
- 結論
背景與介紹
如果您在電腦或手機上瀏覽任何現代網站，您可能會遇到這樣的情況：當您上下滾動網站時，整個螢幕看起來都像是在滾動方向上移動。如果背景出現這種效果，那麼隨著您的滾動，前景中的資訊也會發生變化。這種效果可以簡要地描述為視差滾動。
滾動
讓我們瞭解一下滾動是什麼意思。當您檢視網頁時，在任何方向（上、下、左、右）瀏覽網頁的動作稱為滾動。
通常，如果您是臺式電腦使用者，此操作是透過使用滑鼠上的滾輪來完成的。
歷史
讓我們看看這個詞——滾動。在古代，為了向遠距離的其他人傳送訊息，人們使用手寫的卷軸。這些卷軸看起來如下所示：
想象一下拿著卷軸的人的動作。為了完整地閱讀內容，這個人需要“滾動”並進一步展開它。使用這些卷軸也是為了儲存記錄文字或決策。隨著時間的推移，卷軸的使用越來越多，因為它是由不同的書寫材料製成的，例如紙莎草紙、羊皮紙和紙。
隨著計算機的發展，處理和儲存非常大的文件、表格和影像成為可能。有時資料非常多，以至於螢幕尺寸根本不足以向用戶呈現資料。當要顯示的資料大於視窗或顯示區域的大小時，資料將保持隱藏狀態。這就需要一種擴充套件螢幕區域的方法。
下面列出了一些實現螢幕擴充套件的選項：
- 增加螢幕尺寸
- 減少資料大小
- 使用滾動
這種滾動機制對於從事圖形設計和照片編輯的人來說更為重要。
視差滾動的起源
讓我們深入瞭解視差滾動的歷史。首先，我們將瞭解視差這個詞的含義。視差一詞來自希臘詞παράλλαξις（parallaxis），意思是交替。
如果我們從一個角度觀察一個物體，該物體將以特定的方式出現。但是，如果您從不同的位置移動同一個物體，則物體將出現明顯的移動。這種現象稱為視差。
網頁設計中的視差滾動 - 概念
現在我們已經瞭解了視差的起源和背景，讓我們瞭解視差滾動在網頁設計中的歷史和概念。
定義
根據維基百科——視差滾動是計算機圖形中的一種技術，其中背景影像相對於前景影像移動速度較慢，從而在二維場景中產生深度錯覺，並增強虛擬體驗的沉浸感。
視差滾動在動畫的早期就被使用。許多動畫工作室（如迪士尼）使用多平面攝影機來實現視差效果。
隨著計算機圖形技術的不斷發展以及JavaScript等尖端框架的出現，網頁設計師和開發人員現在可以構建具有豐富體驗的網站。儘管視差滾動最初只有幾層，但隨著計算機中捲軸的出現，它被提升到了一個新的水平。該技術保持不變，但由於其應用於滾動，因此創造了一種獨特的體驗。
示例
視差滾動廣泛應用於現代網站。由於視差滾動可以一併實現移動端和桌面端網站，因此近年來此類網站的受歡迎程度迅速攀升。
下面給出了一些使用視差滾動的網站示例：
貝爾·格里爾斯
隨著動畫的進行，您將能夠看到網站內容是如何變得互動式的。隨著您向前滾動，將顯示越來越多的資訊。
讓您的金錢發揮作用
為了向讀者介紹信用合作社的好處，該網站將帶您瞭解一個故事。隨著您向前滾動，資訊將以獨特的方式顯示。
InfoQuest資訊圖表
使用滾動體驗描繪了員工在工作場所尋找關鍵資訊的歷程。
GitHub 404
這與通常的視差體驗略有不同，螢幕頂部的物件在您將滑鼠指標懸停在其上時會移動。
視差滾動的應用
到目前為止，從定義和背景中應該清楚，視差滾動在各種數字媒體中都很有用。視差滾動的一些應用如下：
遊戲設計
視差滾動廣泛應用於遊戲設計。角色需要相對於背景移動，並且隨著玩家使用滑鼠和鍵盤進行控制，整個體驗需要發生變化。遊戲設計是使用視差滾動非常原始但時尚的方式。
網站
為了讓使用者對網站產生興趣，一些動態和不同的體驗非常重要。正如您可能從上面討論的網站示例中注意到的那樣，視差滾動由於其以互動方式呈現內容而增強了內容。
網頁設計與視差滾動
本章討論了網頁設計的概念以及在網頁設計中使用視差滾動的優勢。
網頁設計背景
自20世紀初以來，由於數字媒體的興起，紙質媒體面臨著激烈的競爭。數字媒體包括我們在網際網路上看到的內容，以及隨之而來的相關雜誌。
您作為每週/每月訂閱的一部分收到的新聞通訊也包含在數字媒體中。主要而言，數字媒體嚴重依賴於移動裝置和臺式電腦。當您可以在手機（手持裝置）和臺式電腦上檢視內容時，它會產生差異。內容在任何一種裝置上的顯示方式，都體現了一種特定的內容設計風格。
這種設計風格稱為網頁設計。從設計或編碼的角度來看，當網頁設計師著手構建網頁時，他/她也將移動裝置考慮在內。
根據維基百科，網頁設計包括網站的製作和維護中的許多不同的技能和學科。其中一項技能就是為使用者設計有影響力的體驗。網頁設計迎合了這種體驗，併為安排頁面內容提供了一種組織化的方式，併為其提供了不同的樣式。
網頁設計包括：介面設計、圖形設計以及使用某些標準編寫程式碼。這項工作可以由一個人完成，也可以由一個團隊完成。
市場上有許多工具可以簡化這項工作，但是，創造網頁外觀取決於一個人的創造力。
現代網頁設計
隨著技術的進步，知識呈爆炸式增長。網際網路已成為一個事物，它極大地提高了我們的生活質量。在任何給定的時間點，普通網際網路使用者都在處理越來越多的資訊。這些資訊可以是臺式電腦上的網站，也可以是手持裝置上的網站；平板電腦或手機。
儘管如此多的資訊試圖吸引使用者的注意力，但很明顯，作為設計網頁體驗的人，只有3秒鐘的時間來傳遞資訊。
如何應對這種情況？傳遞資訊至關重要，因為它是任何網頁設計的源頭。您希望構建一個能夠進行交流的網站，同時它也必須吸引使用者並使其專注於內容。這確實是一項艱鉅的任務。
考慮到任何給定網頁內容的廣泛工作範圍，越來越多的人正在進入網頁設計的領域。一位富有創意的網頁設計師因其創造良好使用者體驗的驚人才能而成為人們關注的焦點。網頁設計師目前可能會在營銷/廣告公司找到工作，或者自己創業，深入網頁設計領域。
美觀性是網頁上給定內容的關鍵。這意味著網頁設計師必須瞭解設計、顏色、間距等原則和基礎。越來越多的使用者每天都能看到高質量的網頁內容。很明顯，人們會將當前的網頁或網站與幾個小時或幾分鐘前訪問的網站進行比較。內容的排序，加上良好的圖形和顏色，使得許多獨立的橫幅/頁面成為網際網路上流行的事物。
示例
讓我們以一個簡單的圖形為例。網際網路上有許多圖形，稱為表情包。它們是簡單的圖形交換格式 (GIF) 影像，在圖形內嵌入了一些文字。這些表情包根據世界某個地區的近期事件在網際網路上傳播。如果我們看這個例子，它們唯一的吸引力就是圖形和一些相關或不相關的文字。
儘管如此，它仍然獲得瞭如此巨大的歡迎，這讓人們思考網際網路上令人驚歎的可能性。
因此，對於有效的網頁設計，創造力和傳達資訊的方法都起著重要的作用。
需要注意的是，一個成功的網頁是網頁設計和網頁開發的結合。根據當前的市場趨勢，除了網頁設計師之外，團隊中還必須配備網頁開發人員。網頁設計師將始終尋找靈感並利用其創造力來建立圖形和相關的配色方案。而網頁開發人員將使用其編碼技能使圖形和配色方案在網站上栩栩如生。
網頁設計師也應該具備編寫程式碼的知識，以便使預期的圖形或配色方案可供網頁開發人員使用。像記事本這樣的簡單應用程式中的簡單程式碼可以幫助網頁設計師在網頁開發中佔據主導地位。
使用視差滾動
視差滾動效果涉及網頁設計師和網頁開發者的工作範疇。網頁設計師可以使用InVision、UXPin等工具建立視差滾動的效果，向網頁開發者傳達滾動時的預期行為。之後，網頁開發者會運用其技能來建立視差滾動效果。這可以透過不同的JavaScript、CSS和jQuery技術來實現。後續章節將詳細介紹每種方法。
根據上一節的定義，**視差滾動是一種在滾動時背景內容以不同於前景內容的速度移動的技術**。
本網站展示了一個簡單的CSS建立視差滾動效果的技術示例 – The Urban Walks。
如上圖所示，螢幕中央的手機在您滾動兩次後會改變內容。此外，請注意在第一次滾動時，帶有手機的背景也會發生變化。
這種過渡給您一種感覺，即手機始終保持在原位，而背景在您向下滾動時發生變化。這種效果稱為視差滾動效果。您知道自己在向下滾動，因為螢幕右側有一些點作為螢幕指示器。
視差滾動的首次應用是在舊的電腦遊戲中。在遊戲中，當角色移動速度快於背景時，固定的背景影像會以較慢的速度移動。一些此類遊戲的例子包括迪士尼的阿拉丁和迪士尼的獅子王。這些遊戲分別於1993年和1994年推出。
雖然視差滾動起源於遊戲，但目前許多網頁設計師都強調這種效果，希望以此吸引使用者喜愛他們的網站。視差滾動的優勢已從網站擴充套件到移動網站。
這些網站在為桌面版本設計視差滾動後，還會新增支援移動螢幕的程式碼。
網頁和移動端的視差滾動優勢
在本節中，我們將從以下幾個方面討論使用視差滾動的優勢：
從使用者角度
視差滾動具有一定的趣味性。如您在以上示例中看到的，隨著使用者從不同的螢幕滾動，傳達千言萬語的資訊變得更容易。
如果我們考慮首次訪問的使用者，每次滾動都伴隨著好奇心。因此，它不僅豐富了網站體驗，還增加了使用者在首次訪問網站時花費更多時間的可能性。
隨著使用者對滾動的興趣，使用者參與度比例會顯著提高。
使用者無需費心去思考如何獲取資訊，因為資訊以更直觀的方式呈現。
在某些情況下，您可以透過動畫化螢幕上的其他專案（例如徽標或選單圖示）來講述您提供的產品/服務的故事。
從技術角度
一旦您為桌面版本實現了視差滾動，就可以非常輕鬆地將相同的框架用於移動網站或螢幕。
由於程式碼片段簡單且可重用，如果您是營銷機構或網站服務提供商，在獲取新客戶時將變得更加輕鬆。
視差滾動的知識使您在前端框架（如CSS、JavaScript等）方面擁有更多專業知識。
CSS技巧
對於網頁開發者來說，在建立視差滾動效果時，有多種技術可用。其中一種技術是使用**層疊樣式表（CSS）**。
CSS 解釋了 HTML 元素如何在螢幕上顯示。您可以建立一個 CSS 檔案，並將其用於整個網站。新增 CSS 檔案比向每個 HTML 元素新增樣式並在網頁的不同部分管理它們更簡單。
**注意** – 本章後面討論的一些方法僅適用於臺式電腦，不適用於移動裝置。在特定技術不適用於移動裝置時，步驟中會予以說明。
考慮到 CSS 將所有額外的繪製工作解除安裝到文件物件模型 (DOM)，因此可以更好地利用硬體加速並獲得流暢的效果，而不會給 CPU 帶來負擔。
絕對定位方法
此方法常用於建立視差效果，因為它相對於其他可用選項而言重量較輕。背景影像的位置相對於螢幕上的其他內容保持固定。在下面討論的示例中，您將看到如何使用 CSS 的魔力來實現它。
在本節中，我們將介紹絕對定位方法的兩種方法：
- 單一背景
- 多重背景
單一背景方法
在這種方法中，我們將在同一個資料夾中建立兩個檔案。請觀察以下步驟：
步驟 1
我們必須在同一個資料夾中建立兩個檔案：第一個檔案包含 HTML 標記，第二個檔案包含 CSS 程式碼。
步驟 2
現在，讓我們定義 HTML 標記。請觀察以下程式碼：
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
步驟 3
開啟記事本。複製並貼上上述程式碼片段。
儲存檔案時，在**儲存型別**下選擇**所有檔案**。根據需要輸入檔名，但檔名後需要新增副檔名 – **.html**，如下面的螢幕截圖所示。
步驟 4
儲存檔案後，在記事本中建立另一個檔案，並貼上以下程式碼：
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}
如您在上一步中看到的，儲存檔案時，在**儲存型別**下選擇**所有檔案**。根據需要輸入檔名，並向其新增副檔名**.css**。
程式碼分析
讓我們瞭解程式碼的哪個部分負責視差效果。視差效果最主要的工作是透過使用透視和變換規則來完成的。請參閱上述程式碼片段中的**第 15 行**。首先為我們的**BgContainer**建立透視。這為變換規則啟動了一個平臺。
在從第 40 行開始的**Parallax**容器中，第 48 行的**transform**規則使用translate(-1px)將BgContainer div推到背景中。
您可以修改translate和scale引數的值來修改視差的深度。
開啟 html 檔案後，將顯示視差效果，如下所示：
**注意** – 在本教程的其餘部分，將假設讀者能夠根據上述方法中提供的資料夾結構建立 HTML 和 CSS 檔案。
多重背景方法
在這種方法中，當用戶向下滾動頁面時，會有不同的影像出現。這裡有一個帶有鉛筆的影像，它以不同的顏色組合來演示這種效果。
請觀察以下 HTML 頁面的程式碼：
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>
與之前的示例類似，我們將使用儲存在與該 HTML 檔案相同位置的**styles.css**。我們有三個不同的 div，分別命名為 First、Second、Third 和 Fourth。
視差滾動的 CSS 程式碼如下所示：
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}
在這裡，我們從第 7 行建立視差效果，這裡的重要屬性是**background-attachment:fixed**。
使用此屬性，帶有彩色鉛筆的第一個影像將始終保持在頂部。向下滾動時，從第 28 行開始描述的不同影像將開始顯示。
因此，您將能夠看到如下所示的視差效果。下圖是我們在多重背景中考慮的示例的螢幕截圖。
純 CSS 視差
讓我們結合前面兩種方法的知識，建立一個高階的純 CSS 視差效果。
區別在於我們排列**image**元素和**z-transform**屬性的方式。屬性的解釋將在 CSS 程式碼之後提供。
使用通常的方法從記事本建立包含以下程式碼的 HTML 檔案。
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>
對於 CSS 檔案，程式碼如下所示：
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}
程式碼分析
我們透過使用**position:absolute**屬性在**第 26 行**固定了第一層的的位置。位置也硬編碼為 0。
在**parallax_two**（帶有標題的層）中，我們應用了**z-index: 10**，為標題提供浮動效果。**parallax_three**層透過提供margin-top屬性移到底部。
因此，我們可以在視差效果中提高複雜性。
請觀察下圖所示的效果。
JavaScript技巧
要建立視差效果，最流行的方法是使用 JavaScript。從本章開始，我們將討論 JavaScript 的概念以及用於實現視差滾動的某些庫。
利用純 JavaScript 可以使網站效能保持最佳狀態。從效能方面來看，使用庫還有許多其他優點。但是，為了更好地理解程式碼組織，我們將從純 JavaScript 視差實現開始。有趣的事實是，有時純 JavaScript 也被稱為**vanilla** JavaScript。
使用純 JavaScript 實現視差滾動
首先，使用以下程式碼建立主 HTML 檔案。HTML 頁面將僅包含四個標題文字。
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>
請注意，在第 4 行，對於此示例，我們使用的是**myscripts.js**檔案，該檔案將與 HTML 檔案和 CSS 檔案儲存在同一個資料夾中。
現在，讓我們準備 CSS 檔案，如下所示。
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
現在是 JavaScript 部分，在記事本中建立一個檔案，並將其另存為myscripts.js。
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});
程式碼分析
讓我們分析 JavaScript 程式碼。
從**第 1 行到第 4 行**的程式碼表示輔助函式。
在第 6 行，我們選擇視差元素並將**scroll**事件新增到視窗。為了確定滾動了多少區域，我們使用**scrolledHeight**屬性。當螢幕向下滾動時，視差元素的**backgroundPositionY**會更新。
為了減慢視差效果，我們除以 1.5，此數字可以更改為您想要的任何數字。
現在，您將能夠看到頁面向下滾動，如下面的螢幕截圖所示。
使用 ScrollMagic JavaScript 庫
如上一節所述，雖然我們可以使用純 JavaScript 建立視差效果，但也有一些功能強大的 JavaScript 庫可以增強使用者體驗。ScrollMagic 就是這樣一個用於建立視差滾動互動的庫。
讓我們藉助以下示例進一步瞭解它：
**注意** – 在此示例中，為了簡單起見，我們將 CSS 儲存在 HTML 檔案中。此外，JavaScript 程式碼也將存在於同一個文件中。簡而言之，我們將只建立一個 HTML 檔案，其中包含引用的 ScrollMagic 庫以及所需的 CSS。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>
如上程式碼所示，我們從**第 3 行到第 6 行**引用了所需的 JavaScript 庫。CSS 程式碼從第 9 行到第 19 行指定。
內容分發網路
第 3 行到第 6 行的指令碼引用指向 ScrollMagic 內容分發網路 (CDN) URL。在現代網站開發中使用 CDN 是有意義的，因為您可以載入所需的庫而不會減慢網站速度。
如果庫需要自定義，則必須將庫託管在各自的伺服器上才能使用這些效果。如果使用庫的基本功能，則使用 CDN URL 更有效。
上面的 HTML 程式碼顯示了一個由兩個分隔符分隔的影像。第一個分隔符顯示標題 – **這些是磚塊**，第二個分隔符顯示 – **更多磚塊**。
請注意，在第 9 行到第 19 行的 CSS 程式碼中，我們只指定了各個視差 div 的位置和樣式。
建立這個柔和的視差**場景**的工作是由 ScrollMagic 庫完成的。如果您參考第 43 行到第 62 行的指令碼程式碼，ScrollMagic **控制器**被呼叫，並建立一個**場景**。
當螢幕被佔用 80% 時，場景引導 DOM 建立視差效果。JavaScript 用於理解滾動觸發器。因此，您將在此頁面上獲得漂浮體驗。
**注意** - 將上面的影像視為 GIF 影像，您將無法觀察到文字分隔符的平滑效果。
觸發動畫
使用 ScrollMagic 庫，建立各種使用者體驗的可能性是無限的。觀察下面給出的程式碼片段以觸發滾動時的動畫。
請注意，為此您需要兩個檔案 - 一個 HTML 檔案和一個 CSS 檔案。
使用下面顯示的程式碼建立 HTML 檔案。
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>
現在，建立一個 CSS 檔案，並在其中包含以下程式碼。
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
程式碼分析
參考 HTML 程式碼，ScrollMagic 程式碼從**第 17 行**開始，一直持續到**第 25 行**。在本節中，我們建立了兩個 ScrollMagic 場景。第一個場景用於磚塊影像，另一個用於橫幅動畫。
如**第 20 行**的**setTween**函式中所指定，當滾動操作發生在螢幕尺寸的 40% 時，下一個場景開始，顯示橫幅“就是這樣！”。
id 為 - **square** 的 div 的不透明度在 CSS 檔案的**第 10 行**和**第 15 行**中控制。
因此，您將在頁面上看到以下動畫。
水平滾動
我們還可以應用視差滾動並實現水平滾動。ScrollMagic 庫可用於建立水平滾動效果。請參見下面的程式碼。
雖然程式碼建立水平滾動效果非常簡單，但我們需要 jQuery 引用來實現螢幕的水平移動。jQuery 的詳細資訊將在下一章中提供，目前，只需按照下面給出的程式碼操作即可。
我們將建立三個獨立的檔案 - 用於主程式碼的 HTML 檔案、用於樣式的 CSS 檔案和用於 ScrollMagic 函式呼叫的 JS 檔案。
這是 HTML 文件的程式碼。
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>
請注意，我們有三個部分，將在滾動後出現。這三個部分分別由第 15、19 和 23 行的 id title1、title2 和 title3 表示。
CSS 文件的程式碼如下所示。
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}
程式碼分析
三個螢幕（或部分）的背景顏色分別在**第 10 行、第 22 行**和**第 25 行**提供。
我們在從**第 13 行**開始的程式碼中計算每個螢幕的相對寬度。
ScrollMagic 的 JavaScript 程式碼如下所示。
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});
請注意第 8 行的**triggerHook**屬性。此屬性負責在使用者完成滾動事件時提供滾動效果。**TimelineMax**函式負責為我們的螢幕提供水平滾動效果。
建立完各個檔案後，您將能夠看到如下所示的水平滾動動畫。
jQuery技巧
在前面的章節中，我們瞭解瞭如何使用 JavaScript 庫為網站新增良好的效果。JavaScript 與 jQuery 結合使用，提供了非凡的靈活性和便捷性，可以為您的網站新增視差滾動。
在本章中，我們將介紹三個 jQuery 外掛來新增視差滾動效果。就像我們在上一章中引用的 JavaScript 一樣，我們將在 HTML 程式碼中使用 jQuery 引用來建立強大的 jQuery 視差滾動。
關於 jQuery 外掛需要注意的一點是，外掛通常不會更新，因此您可能需要在開始使用任何視差滾動外掛之前進行一些研究。
使用 Parallax.js 實現簡單的視差滾動
使用 Parallax.js jQuery 外掛，我們可以輕鬆建立視差滾動效果。考慮到 jQuery 外掛需要高度包含諸如 Bootstrap 之類的庫。請注意，在本章中，程式碼中將包含 HTML5 標籤。
讓我們看看下面顯示的 HTML 檔案。
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>
程式碼分析
以上程式碼片段顯示了一個包含兩個影像和它們之間一些示例文字的頁面的程式碼。
如您所見，程式碼以**<!DOCTYPE html>**開頭，這是讓瀏覽器知道程式碼基於 HTML5 的典型方式。
從**第 4 行到第 6 行**的**<meta>**標籤顯示用於機器解釋的程式碼。您將無法看到此程式碼的影響。這裡需要注意的重要一點是 - 使用**meta**標籤，Web 開發人員可以更好地控制顯示的資料。
此外，在**第 8 行和第 9 行**，我們包含了 CSS 樣式表以及 Bootstrap。對於特定的字型和排版，Bootstrap 是廣泛使用的庫。
**第 10 行和第 11 行**負責 jQuery 和 Parallax.js 庫。包含 Parallax.js 以控制影像的視差效果非常重要。您將能夠在**第 21 行**的**div**上找到**data-parallax**屬性，這足以呼叫 parallax.js 庫以實現所需的視差效果。
視差效果可以在**第 21 行**和**第 40 行**的程式碼中看到。使此效果使用 parallax.js 實現的重要屬性是 - * **data-parallax、data-image-src、data-natural-width、data-natural-height**。
使用 CSS 檔案，我們只有一個屬性需要提供。如下所示。
.parallax-container {
height: 500px;
width: 100%;
}
在上面的 HTML 程式碼中，我們為 CSS 檔案建立了一個特定的結構。我們將有一個名為**css**的資料夾，其中包含 CSS 檔案 - **bootstrap.min.css**和**style.css**。
一旦文件的所有內容都處理完畢，您將能夠看到如下所示的視差效果。
使用 Parallaxator jQuery 外掛
Parallaxator 外掛提供了最佳的 jQuery 視差滾動效果，並且易於使用。您可以從此連結下載 Parallaxator 外掛及其 CSS 和 JS 檔案：Parallaxator GitHub。
下載 CSS 和 JS 檔案後，您可以使用以下程式碼建立 HTML 程式碼。
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>
程式碼分析
視差效果由 parallax_child 類提供，每個 img 標籤都提供了該類。parallax_child 與下面提供的 CSS 和 JS 檔案掛鉤。
為了使 parallaxator 外掛正常工作，我們包含了 fm.parallaxator.jquery.css 和 fm.parallaxator.jquery.js。這些檔案需要與 HTML 檔案位於同一目錄中。
CSS 程式碼如下所示。
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}
由於以上程式碼，您將能夠看到視差效果。
用於視差滾動的 Stellar.js jQuery 外掛
Stellar.js 是視差 jQuery 外掛列表中的另一個補充。雖然它不再維護，但使用其穩定版本的開發人員能夠輕鬆使用視差滾動效果。它與最新版本的 jQuery 相容，並且易於實施。
您需要從 Stellar.js 外掛的官方網站下載最新的 jquery.stellar.js。下載完成後，在與 HTML 和 CSS 檔案相同的資料夾中建立此外掛檔案。
讓我們看看 HTML 程式碼。
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>
程式碼分析
為了使 Stellar.js 正常工作，我們在 jQuery 外掛被引用後立即包含了 jquery.stellar.js 庫（在**第 6 行**）。
Stellar 視差函式在**第 8 行到第 15 行**的 script 標籤中呼叫。使用**data-stellar-background-ratio**屬性，我們為顯示的影像設定了偏移量。這在**第 19、20、21 和 22 行**完成。
CSS 程式碼如下所示。
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}
一旦建立了這兩個檔案並將 stellar.js 外掛檔案包含在同一個資料夾中，您應該能夠看到如下截圖所示的效果。
Bootstrap 技術
Bootstrap 是一個流行的框架，其中包含許多現成的元件可供選擇。Bootstrap 可以最佳化用於實現視差滾動的程式碼。
在本章中，讓我們透過一個示例討論如何使用 Jumbotron 元件來實現視差滾動。
使用 Bootstrap4 Jumbotron 建立全寬視差頁面
想象一個網站，使用者在其中看到一個大型“號召性用語”框，其中包含有關折扣或促銷的一些內容。通常，Jumbotron 在此類位置中找到其應用。它是一個大型框，有助於吸引使用者的注意力。
由於我們只使用 Bootstrap 的一個元件，因此在本例中我們將不建立單獨的 CSS 檔案。讓我們直接進入 HTML 程式碼。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>
程式碼分析
**第 6 行**引用 Bootstrap 4 庫。我們從**第 8 行到第 11 行**為 jumbotron 指定了邊距和圓角。
如我們所見，在**第 33 行**，我們使用 jumbotron 類建立一個 div 來顯示一個大型框，我們將在其中載入特定的影像。請注意，這次沒有影像的直接 URL，我們將使用下載的影像。您可以為您的示例下載任何高解析度影像，並在**第 16 行**中指定它。
執行上述程式碼後，您將看到的輸出如下所示。
Web 設計中的視差滾動 - 結論
在本教程中，我們學習了建立視差滾動的不同庫。我們涵蓋了從使用 CSS 的基本級別到使用 Bootstrap 進行前端開發的高階級別等所有方面。我們建議您運用您的創造力來設計一個難以忽視的網頁。請記住，對於視差滾動，網上有大量的示例可以為您提供靈感。
視差滾動應用
正如我們在引言章節中討論過的，您可以使用視差滾動來實現非凡的使用者體驗。以下是一些可以在網站中包含視差滾動的創意。
時間軸網站
這類網站通常需要講述關於某個產品、公司或其他事物的的故事。您可以建立視差效果，將故事呈現給訪問者，並透過不同的動畫保持他們的參與度。
對於時間軸網站來說，建立一個背景並在前景中顯示文字內容將非常有價值。您可以與圖形設計師合作，建立與背景相輔相成的圖形。
移動應用網站
如今，移動應用對於任何產品/服務來說都是必不可少的。許多初創公司正在尋求建立移動應用網站，以解釋移動應用的功能和侷限性。
蘋果應用商店以其嚴格的應用建立指南而聞名，要求移動應用必須擁有一個支援網站。該網站始終需要具有吸引力和使用者友好性。
使用視差滾動，您可以使用移動影像，並在使用者向下滾動頁面時顯示不同型別的功能。本教程第 4 章中已經討論了一個這樣的示例。
滑鼠懸停效果
您可以利用視差滾動和滑鼠懸停的強大功能來建立更高級別的動畫。透過滑鼠懸停，您可以控制滾動的方向並建立視差效果。
這樣，在創建出色體驗方面有很多可能性。您只需要一個創意以及正確的工具和庫。
Web UI 的未來
憑藉技術的強大功能和視差滾動等創意元素，創造令人驚歎的使用者體驗的競爭從未如此激烈。這不僅限於網站，還擴充套件到了移動網站。
雖然 Web UI 目前正處於頂峰，但擁有一個與移動裝置相容的網頁是當務之急。正如我們在 Bootstrap 和 jQuery 的示例中看到的，如果網站不支援手持裝置，則無法長期存在。
除了現有的庫之外，使用者體驗的未來也熱切期待人工智慧和虛擬現實。有一些網頁可以使用 VR 裝置檢視。在這種情況下，與最新的外掛保持聯絡以及尋找建立新的外掛確實很有意義。
將您在本教程中學到的知識應用於建立最佳的使用者體驗，祝您在 Web 開發之旅中好運和成功！