昨天我已經在首頁加上了 Banner 圖片，今天我想進一步讓它更動態。

我想要的效果是：當頁面往下滑動時，Banner 圖片會慢慢淡出；往回滑時，圖片又會恢復原本的樣子。

1. CSS- 設定banner

2. JavaScript – 捲動淡出效果

說明:

window.addEventListener("scroll", function () {

• 給整個視窗（window）加上一個監聽器 (event listener)，當使用者滾動網頁 (scroll) 的時候，就會執行裡面的程式

const banner = document.querySelector(".banner");

• 抓取網頁中 class 名為 banner 的元素，也就是放在最上方的圖片

const scrollY = window.scrollY; // 滾動距離

• window.scrollY 代表目前網頁往下滾動了多少像素 (px)
  例如：
  • 剛進網頁還沒滾動 → scrollY = 0
  • 往下滑 150px → scrollY = 150

const fadePoint = 300; // 超過300px開始淡出

• 設定一個「淡出點」：當滾動距離到 300px 時，banner 的透明度應該要完全消失

let opacity = 1 - scrollY / fadePoint;

• 算出透明度：
  • 一開始 scrollY = 0 → opacity = 1（完全不透明）
  • 滾動到一半 scrollY = 150 → opacity = 0.5（半透明）
  • 滾動到 scrollY = 300 → opacity = 0（完全消失）

if (opacity < 0) opacity = 0; // 最低透明度0
if (opacity > 1) opacity = 1; // 最高透明度1

• 防呆用：確保透明度永遠在 0 ~ 1 之間。
  • 0 代表完全透明
  • 1 代表完全不透明

banner.style.opacity = opacity;

• 把計算好的透明度值套用到 CSS → 改變 .banner 的 opacity，就會讓圖片隨著滾動慢慢淡掉

總結流程

1. 偵測「網頁滾動」
2. 取得目前滾動距離 (scrollY)
3. 根據滾動距離，算出圖片透明度
4. 把透明度更新到 .banner → 達到滾動漸層淡出的效果

畫面展示

初始畫面:

開始滑動畫面: