本文記錄本站存放在 original/travel-through/ 下的一個原創前端視差小實驗：用三張分層 PNG（手機底圖、玻璃蓋板、前景角色）疊成「角色穿透屏幕」的讀法，再通過鼠標位移驅動各層以不同幅度平移——全程在 DOM 內完成，使用 transform-style: preserve-3d、每層 data-depth 係數，以及 requestAnimationFrame 對指針輸入做緩動，不依賴 WebGL 或遊戲引擎。

在線體驗

在下方嵌入框內移動鼠標（建議桌面端）。三層位移幅度不同；指針進入區域時會顯示跟隨的小白點光標，離開區域後隱藏。觸屏設備仍可看到靜態合成，但本原型以鼠標交互為主。

分層結構（由後到前）

美術拆成獨立 PNG，便於在代碼裡改深度而無需重繪整張合成圖。下列深度對應演示中的 data-depth；數值越大，同樣鼠標偏移下移動越遠。

運動怎麼算

mousemove 時將指針相對容器中心歸一化到約 −1…1。每幀用 cx += (mx - cx) * 0.07 向目標緩動，再對每層執行 translate(tx, ty)，其中 tx = cx * amplitude * depth。在 amplitude = 28 像素量級下，前景大約可比後景多移動一倍左右，層次清晰又不易滑出畫框。

• 不劫持頁面滾動 — 僅演示框內圖層響應，正文照常滾動。
• 圖片設 pointer-events: none，事件落在容器上。
• 指針離開容器時隱藏自定義光標，避免殘留圓點。

文件夾裡的其它素材

除嵌入用的三層外，original/travel-through/ 還保留備用板（phone.png、glass.png、person-bak.png、ren1.png）以及一張生成式氛圍圖（Gemini_Generated_Image_khh2pdkhh2pdkhh2.png）。文件名固定，方便本文、iframe 與後續修改共用路徑。

為什麼寫成獨立文章

社交平臺難以保留製作過程；用帶標題、alt 與嵌入的穩定 URL，便於搜索與引用「CSS 視差」「分層 PNG UI」「鼠標緩動」等主題。若你複用此模式，請在 iframe 外保留足夠正文（如下），並對嵌入使用 loading="lazy"，同時記錄 depth 數值，避免下次改版靠猜。

美術導出流程（PSD → PNG）

我從同目錄分層 PSD（phone.psd）起步：機身、玻璃高光、角色分屬不同組。幾條讓我少踩坑的導出規則：(1) 按嵌入顯示寬度的 2× 導出，縮小後鋸齒更少；(2) 角色腳底錨在畫布底邊，避免視差時「整個人漂浮」；(3) 玻璃層留足透明邊距，讓 mix-blend-mode: screen 有餘量，光暈不被裁切。造型迭代時我會給 PSD 打日期副本，而不是覆蓋——ren1.png 與 Gemini 氛圍圖都是可回退的分叉，不會打斷線上演示路徑。

體積與性能

三張 PNG 加一個 HTML，故意比 WebGL 包小得多。嵌入用圖壓縮後大約幾百 KB；腳本壓縮後不足兩 KB。列表頁對 iframe 懶加載，首頁輪播不會提前付解碼成本。演示框內只有指針在區域內時跑一條 requestAnimationFrame；mouseleave 時把偏移緩回零，避免圖層在畫外繼續空轉。

我實際測過的瀏覽器

Windows 上 Chrome / Edge：視差與自定義光標符合預期。Firefox：同上，並確認玻璃層的 mix-blend-mode: screen 在暖色底板上仍可讀。Safari（iOS）：文章滾動正常；視差以鼠標為主，我不承諾手機觸控拖拽深度——讀者仍能看到靜態合成，對本歸檔頁足夠。若以後產品化，會加 matchMedia('(pointer: fine)') 閘門，粗指針設備顯示一行說明。

和「劫持滾動」視差的差別

許多營銷站把視差綁在滾動位置上。這裡深度綁在有界框內的指針位置，正文仍可讀，也不和瀏覽器滾動物理打架。這個選擇也讓演示能嵌進 iframe 而不劫持父頁滾動——aogl.cn 需要這一點：文章處在正常文檔流裡，譯文 URL 折上還疊著廣告與語言切換。

原型侷限

尚未做 prefers-reduced-motion 降級；生產環境建議在「減少動態」時凍結圖層。極窄視口也未專門適配，上線時可能在窄屏改為靜態海報。本文記錄的是當前實現，而非成品級營銷微站。

深度調參備忘

0.15 / 0.38 / 0.70 不是神聖比例：後景再大就會和機身「搶戲」，前景再大角色會滑出手機框。我改深度時只動 HTML 屬性，不開圖軟件——這正是分層導出的意義。若你換角色圖，先鎖腳底錨點，再微調第三層 depth；不要同時改圖與係數，否則分不清是美術問題還是腳本問題。

中文加厚：分層視差與手機框

parallax_phone_scene.html 把背景、玻璃、穿透角色分成不同深度係數，滾動或指針移動時才有「鑽出屏幕」的錯覺。玻璃層用混合模式提亮邊緣，但必須剋制，否則角色膚色會被洗白。素材分別落在 Mobile-phone-background.png、Glass-cover.png、Penetrating-characters.png 等文件，文章用文件名把管線釘死，方便日後差分。

相對全景公寓篇，本篇更短鏡頭、更強 UI 隱喻：手機既是畫框也是敘事裝置。中英都寫清失敗嘗試（過強視差導致眩暈、自動播放耗電），才符合「生產手記」而不是效果炫耀頁。