一、什麼是滾動視差？
滾動視差（Parallax Scrolling）是一種前端網頁設計技術，透過不同層的背景與內容以不同的速度滾動，營造出立體感與動態視覺效果。這種技術常見於品牌網站、產品介紹頁面或作品展示頁面，能有效提升使用者的沉浸感與互動體驗。
滾動視差的視覺效果
- 背景與內容滾動速率不同：背景滾動速度較慢，前景滾動速度較快，模擬景深效果。
- 多層次視覺變化：不同層的元素可以有獨立的滾動行為，增加動態感。
- 創造故事性：透過滾動觸發不同場景，讓使用者體驗連貫的視覺敘事。
二、滾動視差的基本實作
1. 使用純 CSS 來製作滾動視差
CSS 提供了 background-attachment: fixed; 屬性，可以讓背景圖像保持固定位置，而前景內容繼續滾動，營造簡單的滾動視差效果。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾動視差示例</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.parallax {
background-image: url('parallax-background.jpg');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 500px;
background-color: white;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h2>滾動視差示例</h2>
<p>這是一個簡單的滾動視差網頁，背景固定不動，前景內容滾動。</p>
</div>
<div class="parallax"></div>
</body>
</html>
|
這種方式雖然簡單，但無法實現更複雜的視差動畫效果。如果想要更進階的效果，通常需要搭配 JavaScript 或 CSS 變形（Transform）。
透過 transform: translateZ() 搭配 perspective()，可以製造出更立體的視差效果。
.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: absolute;
width: 100%;
transform: translateZ(-1px) scale(2);
}
|
這種方式可以讓不同層的元素有不同的滾動速率，達到更細緻的視覺效果。
三、使用 JavaScript 製作更靈活的滾動視差
雖然純 CSS 可以實現基本視差效果，但若要控制不同層級的滾動速度，或者添加額外動畫效果，就需要 JavaScript。
1. 簡單的 JavaScript 滾動視差
使用 window.scrollY 來控制元素的 transform 屬性，使其隨滾動變化。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 滾動視差</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.parallax {
position: relative;
height: 100vh;
overflow: hidden;
background: url('parallax-background.jpg') center/cover no-repeat;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: white;
}
</style>
</head>
<body>
<div class="parallax">
<div class="text">滾動視差效果</div>
</div>
<script>
window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
document.querySelector('.parallax').style.backgroundPositionY = scrollPosition * 0.5 + 'px';
});
</script>
</body>
</html>
|
在這個範例中，我們透過 JavaScript 讓背景圖片根據滾動位置改變 backgroundPositionY，從而達成視差效果。
如果想要更進階的視差效果，可以使用 ScrollMagic 這類 JavaScript 函式庫，來更精確地控制滾動動畫。
首先安裝 ScrollMagic：
然後在 JavaScript 中設定滾動觸發點：
let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
triggerElement: '.parallax',
duration: '100%',
triggerHook: 0
})
.setTween('.parallax', { y: '50%', ease: Linear.easeNone })
.addTo(controller);
|
這樣可以讓 .parallax 元素在滾動時逐漸移動，達成視差效果。
四、滾動視差的應用場景
滾動視差可以應用於許多不同類型的網站，例如：
- 品牌網站：用來展示產品特性與公司理念，提高視覺吸引力。
- 作品集網站：適合攝影師、設計師，讓內容更具層次感。
- 故事敘述頁面：用來製作互動式故事，讓用戶在滾動中探索內容。
- 促銷與行銷頁面：讓特定區塊在滾動時突出，吸引目光。
五、滾動視差的優勢與缺點
優勢
- 增強視覺吸引力，使網站更具互動性。
- 可提升品牌形象，讓內容更具故事性。
- 創造更流暢的使用者體驗，增加網站的停留時間。
缺點
- 過多視差效果可能會影響效能，導致頁面滾動不流暢。
- 可能對行動裝置不友善，需要額外的優化。
- 過度使用可能會影響可讀性，降低使用者體驗。
六、結論
滾動視差是一種有效提升網站視覺吸引力的技術，適用於品牌展示、作品集與故事敘述類型的網站。透過 CSS 的 background-attachment，JavaScript 的 scrollY，或是使用函式庫如 ScrollMagic，都能實現不同程度的視差效果。
然而，使用時需注意效能與可讀性，確保不會影響使用者體驗。在實作時，建議先從簡單的 CSS 視差效果開始，逐步引入 JavaScript 或函式庫，根據需求選擇最佳實作方式。
Comments