이 글은 original/travel-through/의 오리지널 시차(패럴랙스) 실험입니다. PNG 3레이어(폰 배경·유리·전경 캐릭터)를 겹치고 마우스로 깊이별 이동량을 다르게 줍니다. WebGL 없이 data-depth와 requestAnimationFrame 스무딩만 사용합니다.
라이브 데모
parallax_phone_scene.html — 3레이어·마우스 시차.레이어
- 0.15 —
Mobile-phone-background.png - 0.38 —
Glass-cover.png(mix-blend-mode: screen) - 0.70 —
Penetrating-characters.png
포인터를 정규화한 뒤 cx += (mx - cx) * 0.07로 이징하고, amplitude = 28px로 이동합니다. iframe 밖에 설명 문단을 두면 SEO·접근성 모두에 유리합니다.