本文记录本站存放在 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 降级；生产环境建议在「减少动态」时冻结图层。极窄视口也未专门适配，上线时可能在窄屏改为静态海报。本文记录的是当前实现，而非成品级营销微站。