aogl.cn — personal bookmarks for generative AI tools and LLM releases

← Back to home · Editorial originals

Travel-through parallax — layered phone scene

CSS 3D · stacked PNGs · smoothed mouse parallax

· aogl.cn original

This page documents an original front-end parallax study I keep under original/travel-through/ on aogl.cn. The goal is a compact “hero” block that feels like a phone mockup with a character stepping through the glass—achieved with three stacked PNG layers and mouse-driven translation, not WebGL or a game engine. Everything runs in the DOM: transform-style: preserve-3d on a scene root, per-layer data-depth multipliers, and a small requestAnimationFrame loop that eases pointer input so motion feels weighted rather than jittery.

Try the live scene

Move your pointer inside the frame below (desktop). Each layer shifts by a different amount; a custom dot cursor follows the pointer while you are inside the box. On touch-only devices the scene still renders, but parallax is intentionally mouse-first for this prototype.

Embedded demo: parallax_phone_scene.html — three PNG layers, smoothed mouse parallax.

Layer stack (back to front)

I export art as separate PNGs so depth can be tuned in code without re-painting. The depth values below are the data-depth attributes in the demo; larger numbers move more for the same pointer delta.

Phone chassis and environment — rearmost parallax layer
Layer 1 · depth 0.15 — Mobile-phone-background.png: full-frame phone / environment plate (moves subtly).
Glass cover overlay with screen blend — mid parallax layer
Layer 2 · depth 0.38 — Glass-cover.png: glass sheet using mix-blend-mode: screen so highlights add on top of the back plate.
Foreground character overlapping the phone — strongest parallax layer
Layer 3 · depth 0.70 — Penetrating-characters.png: character anchored to the bottom center (~80% width) so the “break the glass” read stays consistent.

How the motion is calculated

On mousemove, the script normalizes pointer position to roughly −1…1 relative to the container center. Each frame it lerps the current offset toward the target (cx += (mx - cx) * 0.07) and applies translate(tx, ty) where tx = cx * amplitude * depth. With amplitude = 28 pixels at the container scale, the foreground character can travel about twice as far as the background plate—enough for a clear depth read without sliding off-canvas.

  • No scroll hijacking — only layers inside the demo box react; the article page scrolls normally.
  • Pointer-events: none on images so hit-testing stays on the container.
  • Custom cursor hidden on leave — avoids leaving a stray dot when the pointer exits.

Source assets in the folder

Besides the three layers used in the embed, original/travel-through/ also keeps alternate plates (phone.png, glass.png, person-bak.png, ren1.png) and a generative mood frame (Gemini_Generated_Image_khh2pdkhh2pdkhh2.png) from look-dev. I treat the repo folder as a small archive: filenames stay stable so this article, the iframe, and future edits all reference the same paths.

Generative look-dev frame for travel-through phone scene Alternate character render — travel-through look development

Why publish it as an article

Social posts lose context; a canonical URL with headings, alt text, and an embed gives crawlers and humans a single place to understand CSS parallax, layered PNG UI, and mouse smoothing. If you reuse the pattern, keep substantive copy outside the iframe (as here), lazy-load the embed, and document depth values so the next edit does not become guesswork.

Limits of this prototype

There is no reduced-motion fallback yet—consider prefers-reduced-motion: reduce to freeze layers. The scene is also not responsive-tested for very narrow viewports; for production you would likely swap to a static poster image under a breakpoint. This page records what shipped today, not a finished product microsite.