Cette note documente une étude de parallaxe originale dans original/travel-through/ : trois PNG empilés (châssis téléphone, verre, personnage au premier plan) décalés différemment selon la souris. Pas de WebGL — seulement des transform CSS et un lissage requestAnimationFrame.
Démo en direct
parallax_phone_scene.html — trois calques, parallaxe souris lissée.Calques (arrière → avant)
- 0.15 —
Mobile-phone-background.png - 0.38 —
Glass-cover.png(mix-blend-mode: screen) - 0.70 —
Penetrating-characters.png
Le pointeur est normalisé au centre ; cx += (mx - cx) * 0.07 amortit le mouvement (amplitude = 28 px). Garder du texte sémantique hors iframe aide l’indexation sur parallaxe CSS et UI en couches.