現代 CSS 以其強大的功能和非凡的能力重新定義了網頁開發。CSS 是一款萬能的工具，提供了出色的選項，使網頁具有高度的互動性和吸引力。無論是設計的靈活性、快速自訂、優異的樣式選項，還是先進的使用者介面 (UI)——CSS 為所有網頁開發和樣式需求提供了端到端的解決方案。最重要的是，使用 CSS 和 HTML，您只需編寫幾行程式碼即可添加動畫和效果，而這在以前使用 JavaScript 是非常費力的。
在本指南中，我們將引導您完成在 Chrome 中使用 CSS 建立視差滾動效果的步驟。
先決條件
要學習本教學，您必須對 HTML 和 CSS 有基本的了解。
步驟 1：建立新專案
讓我們開始使用命令列介面建立新的專案資料夾和檔案。打開您的終端機並輸入以下命令以建立新的專案資料夾：
|
1 |
mkdir css-parallax |
使用 cd 命令將目錄切換至 css-parallax 資料夾：
|
1 |
cd css-parallax |
接下來，在 css-parallax 資料夾中建立一個 HTML 檔案，我們將把所有的 HTML 程式碼放在這裡。將檔案命名為 index.html 並使用 nano 命令打開它：
|
1 |
nano index.html |
當我們的 index.html 檔案準備就緒後，讓我們繼續前進，透過添加引導性的 HTML 程式碼來建構網頁結構。
步驟 2：基本 HTML 的結構
在此步驟中，我們將透過添加 HTML 程式碼來設計我們的網頁。在 index.html 檔案中添加以下幾行程式碼：
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>視差滾動效果使用CSS</title> </head> <body></body> </html> |
設定好網頁的基本結構後，建立三個 section 類別——兩個用於背景圖片，一個用於靜態純色背景。接下來，在 <body> 標籤中添加以下幾行程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>套用視差滾動效果前</h1> </section> <section class="section static"> <h1>歡迎體驗 視差滾動</h1> </section> <section class="section parallax bg2"> <h1>套用視差滾動效果後</h1> </section> </main> ... </body> |
將 HTML 程式碼插入 <body> 標籤中，即完成了我們 html. 檔案 的基本設定。在接下來的步驟中，我們將引入 CSS 並為每個部分定義樣式選項。
Step 3: Introduction to CSS
讓我們透過添加 CSS 檔案並建立視差效果來為網站設計樣式。首先，在 css-parallax 資料夾，我們將把建立視差滾動效果所需的所有 CSS 程式碼放在這裡。之後，插入一個 styles.css 檔案在您的 css-parallax 資料夾，使用 nano 指令：
|
1 |
nano styles.css |
我們將開始為網頁設計樣式，從 .wrapper 類別。 .wrapper 類別設定了整個頁面的透視和滾動屬性。從 wrapper 類別開始，並指定其高度、溢出（overflow）和透視（perspective）。將 wrapper 的高度設定為固定值，以使視差滾動效果正常運作。在本指南中，我們已將視埠值設定為使用 100vh 以取得螢幕視埠的完整高度。您可以根據您的專案需求修改 vh 值。接下來，透過將 overflow-x 屬性設定為 hidden 來停用螢幕水平捲軸。此外，指定 perspective 屬性值為 3px。讓我們在 styles.css 檔案中：
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
步驟 4：為 .section 類別加入樣式
在 wrapper 類別旁，為 .section 類別加入樣式。 .section 類別定義了主要區段的大小、顯示和文字屬性。將位置設定為 relative 以對齊子元素 .parallax::after 與父元素 .section 的相對定位。保持 view-height(vh) 為 100 以取得螢幕視埠的完整高度。根據您的需求加入、修改其他參數並為其設計樣式。
在您的 styles.css 檔案中，在 wrapper 類別旁加入以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
接下來，我們將加入一個偽元素並為其設計樣式，以建立視差效果並將其付諸實行。
步驟 5：為 .parallax 類別加入樣式
在此步驟中，我們將在 .parallax 上加入一個偽元素。此偽元素將是該元素的最後一個子元素，並會將 ::after 偽元素加入到負責啟動視差效果的背景圖片中。在程式碼的前半部分，設定了偽元素的基本顯示規格和定位。在後半部分，我們將使用 translateZ() CSS 函數加入 transform 屬性，並將其保持為 (-1px)。此外，加入 z-index 以控制垂直堆疊。
在 .section 類別下方加入以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
步驟 6：為每個區段加入圖片和背景
讓我們在靜態區段的背景圖片和背景顏色中加入最終的 CSS 屬性。首先為 .static 區段加入純色背景。將背景顏色設定為 aqua 並在 .parallax::after 類別之後加入以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
此 .static 類別為沒有圖片的靜態區段新增背景。另外兩個具有 .parallax 類別的區段則有專門用於容納背景圖片的專屬類別。請分別在 .bg1 與 .bg2 類別中加入背景圖片的 URL。
在本教學中，我們使用的是來自 Unsplash 的隨機圖片。您也可以使用來自其他網站的圖片，例如 Pixapay, Placekitten、以及 Pexels 等網站，並根據您的喜好進行自訂。請將以下程式碼新增至 .static 類別：
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
步驟 7：將 CSS 與 HTML 連結
現在我們已經新增了視差滾動效果的所有程式碼，讓我們將 styles.css 檔案與 index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>視差滾動效果 搭配 CSS</title> </head> ... |
開啟 index.html（我們在 步驟 2 中建立的檔案），並在 Chrome 瀏覽器中開啟：
結論
在本教學中，我們逐步完成了使用基本設定來建置可用網頁的步驟。還有許多其他有趣的選項和自訂選項供您實驗。您可以嘗試加入陰影效果、修改圖片滾動以及進行其他調整，讓您的學習過程充滿樂趣與挑戰。
若要進一步深入探討網頁開發主題，請參考來自 我們部落格:
祝您程式設計愉快！
留言
目前尚無留言。成為第一個留言的人吧。