往下滑，網站自己動：用 ChatGPT 出圖、Claude 寫網頁做滾動敘事的 3 步

01原理：同一個鏡頭、好幾張圖、用捲動控制

滾動敘事不是影片。它是 5 到 8 張同一個鏡頭的圖片疊在一起，讀者往下滑多少，就顯示第幾張。因為鏡頭不動，只有內容變，看起來就像畫面在你手上「長」出來。

1. 圖：同一個構圖、同一個光線，只改主體（空盤 → 蛋糕 → 加草莓 → 加蠟燭）。
2. 網頁：一個很高的區塊，裡面的圖片用 sticky 固定在螢幕上，捲動位置決定顯示哪一張。
3. 上線：純 HTML，一個資料夾就能放到免費主機。

021. 生圖（ChatGPT，同一個對話）

最重要的是鏡頭、構圖、光線都不能變。所以第一張要把這些說清楚，之後每一張只說「加什麼」。

白色蛋糕架放在水磨石桌面上，窗光從左邊進來，1:1

鏡頭、構圖、光線都不變，只加：[X]

1. 做 5 到 8 張，例如：空架 → 海綿蛋糕 → 抹上奶油 → 放草莓 → 插蠟燭 → 切一片。
2. 全部下載後在 Photoshop 或 Figma 疊起來比對，有偏移就先裁齊，不然切換時會跳。
3. 轉成 WebP，寬 1200px，每張壓到 200KB 以下。8 張加起來不到 2MB，手機才載得動。
4. 檔名照順序：stage-1.webp、stage-2.webp……

032. 寫網頁（Claude）

把圖片上傳給 Claude，貼上這段。裡面每一個要求都有原因，不要刪。

寫一個單一 HTML 手機網站。stage-1 到 5.webp 是同一個鏡頭。做 500vh 的 sticky 區塊，用捲動位置計算進度，圖片逐張 crossfade，不要用時間動畫，全部預先載入，每個階段一句說明＋進度條，支援 prefers-reduced-motion。下方加上：[菜單、價錢、取貨]

1. 「500vh」：5 張圖，每張給一個螢幕高度的捲動距離。8 張就改 800vh。
2. 「用捲動位置計算進度，不要用時間動畫」：畫面跟著手指走，停下來就停，這才是滾動敘事的手感。
3. 「全部預先載入」：圖片沒載完就切換會閃白。
4. 「支援 prefers-reduced-motion」：使用者關掉動畫時，直接顯示最後一張，不做切換。
5. 「下方加上菜單、價錢、取貨」：故事講完要能下單，不然只是好看。

043. 上線（Netlify Drop，免費）

1. 把 index.html 和所有 .webp 放在同一個資料夾。
2. 打開 Netlify Drop，把整個資料夾拖進網頁。
3. 幾秒後會給你一個網址，直接可以分享。
4. 想要自己的網域，註冊 Netlify 帳號後在設定裡加 custom domain。

• Netlify Drop — 拖放資料夾即上線

05要注意

1. 圖片是整個效果的 90%。構圖對不齊，程式再好也會跳。
2. 手機上 8 張是上限，再多就會卡。
3. AI 生成的食物照拿來做自己店的網站前，看清楚工具的使用條款；正式上線建議換成自己拍的照片，用同一個三腳架位置拍 5 到 8 張。