aogl.cn — личные закладки по инструментам генеративного ИИ

← На главную · оригиналы

Параллакс travel-through — слоистая сцена с телефоном

CSS 3D · слои PNG · сглаженный параллакс

· Оригинал aogl.cn

Эта страница описывает оригинальный параллакс-эксперимент в original/travel-through/: три PNG-слоя (корпус телефона, стекло, персонаж спереди) сдвигаются на разную величину при движении мыши. Без WebGL — только CSS-transform и сглаживание в requestAnimationFrame.

Живая демонстрация

parallax_phone_scene.html — три слоя, сглаженный параллакс мыши.

Слои (сзади вперёд)

  • 0.15Mobile-phone-background.png
  • 0.38Glass-cover.png (mix-blend-mode: screen)
  • 0.70Penetrating-characters.png

Координаты указателя нормализуются; cx += (mx - cx) * 0.07, amplitude = 28 px. Текст вокруг iframe помогает поисковикам понять тему: CSS-параллакс, слои PNG.