什麼是視差滾動？如何實現視差滾動的效果？

王铁柱6發表於2024-11-23

視差滾動（Parallax Scrolling）是一種網頁設計技術，透過讓多層背景以不同的速度移動，創造出一種深度和層次感，使網頁更具動態和吸引力。 前景元素滾動速度比背景元素快，模擬了人眼觀察近處和遠處物體移動速度不同的效果。

實現視差滾動效果的方法有很多，以下是幾種常見的方法：

1. 使用 CSS background-attachment: fixed;

這是最簡單的一種方法，適用於單層背景的視差效果。

body {
  background-image: url("background.jpg");
  background-attachment: fixed;
  background-position: center;

相關文章