本文记录本站存放在 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 隐喻：手机既是画框也是叙事装置。中英都写清失败尝试（过强视差导致眩晕、自动播放耗电），才符合「生产手记」而不是效果炫耀页。