本文記錄本站存放在 original/travel-through/ 下的一個原創前端視差小實驗：用三張分層 PNG（手機底圖、玻璃蓋板、前景角色）疊成「角色穿透屏幕」的讀法，再通過鼠標位移驅動各層以不同幅度平移——全程在 DOM 內完成，使用 transform-style: preserve-3d、每層 data-depth 係數，以及 requestAnimationFrame 對指針輸入做緩動，不依賴 WebGL 或遊戲引擎。
在線體驗
在下方嵌入框內移動鼠標（建議桌面端）。三層位移幅度不同；指針進入區域時會顯示跟隨的小白點光標，離開區域後隱藏。觸屏設備仍可看到靜態合成，但本原型以鼠標交互為主。
parallax_phone_scene.html — 三層 PNG + 平滑鼠標視差。分層結構（由後到前）
美術拆成獨立 PNG，便於在代碼裡改深度而無需重繪整張合成圖。下列深度對應演示中的 data-depth；數值越大，同樣鼠標偏移下移動越遠。
Mobile-phone-background.png：全幅手機/環境底板（位移最 subtle）。
Glass-cover.png：玻璃層使用 mix-blend-mode: screen，高光疊在底圖上。
Penetrating-characters.png：角色約 80% 寬、底對齊，保持「破屏而出」構圖。運動怎麼算
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 數值，避免下次改版靠猜。
原型侷限
尚未做 prefers-reduced-motion 降級；生產環境建議在「減少動態」時凍結圖層。極窄視口也未專門適配，上線時可能在窄屏改為靜態海報。本文記錄的是當前實現，而非成品級營銷微站。