Przejdź do głównej zawartości
P2Lab Stage

Parallax myszy

Parallax myszy daje scenom poczucie głębi: gdy odwiedzający porusza kursorem, warstwy dryfują w przestrzeni 3D. Dobrze zrobiony to subtelne “ożywienie”; przesadzony to nudności. Ta strona pokazuje jak silnik działa, jak go tuningować i jak respektuje dostępność.

Model

Dział zatytułowany „Model”

Parallax jest per warstwa, nie globalny. Każda warstwa może niezależnie się włączyć przez modal Layer Style → zakładkę Parallax, gdzie ustawiasz:

  • Depth (−1 do 1) — mnożnik offsetu translate.
  • Tilt (0 do 1) — mnożnik rotateX / rotateY.
  • Respect reduced-motion preference — pomija parallax dla odwiedzających z prefers-reduced-motion: reduce.

Parallax intensity (0–100) sceny (Stage settings → Parallax) to globalne wzmocnienie. Transform każdej warstwy na storefroncie to:

translate3d(depth × intensity × Xratio, depth × intensity × Yratio, 0)
rotateX(tilt × intensity × Yratio deg)
rotateY(tilt × intensity × −Xratio deg)

gdzie Xratio / Yratio to znormalizowana pozycja kursora względem shella (-1 przy lewej/górnej krawędzi, +1 przy prawej/dolnej).

Wybór wartości

Dział zatytułowany „Wybór wartości”

Dobra wizualna hierarchia używa małych wartości absolutnych:

  • Warstwy tła — depth ≈ 0 do 0.1. Albo lekko ujemne (-0.05), żeby dryfowały przeciwnie do pierwszego planu, wzmacniając wrażenie głębi.
  • Mid-ground — depth ≈ 0.2 do 0.4.
  • Foreground / hero element — depth do 0.6 albo 0.7.

Tilt jest bardziej agresywne niż translate; wartości powyżej 0.3 zwykle wydają się przesadzone. Zacznij od 0.1–0.2.

Stage intensity to master fader. Z każdą warstwą ustawioną na wartości projektowe slider intensywności pozwala stroić ogólną siłę parallax bez re-edycji warstw. Ustaw na 0, żeby wyłączyć parallax dla całej sceny bez ruszania pojedynczych warstw.

Jak działa silnik

Dział zatytułowany „Jak działa silnik”

Silnik parallax pluginu podłącza listener mousemove do roota .p2lab-stage__shell (albo do roota slidera dla scen slider). Na każdym mousemove:

  1. Oblicza pozycję kursora względem shella.
  2. Normalizuje do zakresu (-1, -1) … (+1, +1).
  3. Dla każdej warstwy z data-depth / data-tilt oblicza transform i stosuje do .p2lab-stage__layer-wrap przez style.transform.

Translate i rotate idą na .p2lab-stage__layer-wrap (element pozycjonujący). Faktyczna treść warstwy (.p2lab-stage__layer) zachowuje własne transformy animacyjne — komponują się na osobnym elemencie DOM, więc parallax i animacje osi czasu się nie kłócą.

Warunki wyłączenia:

  • prefers-reduced-motion: reduce — silnik nie podłącza listenera (zakładając że warstwa ma Respect reduced-motion włączone — a powinno być domyślnie on dla dostępności).
  • Coarse pointer (pointer: coarse) — urządzenia dotykowe nie mają sensownego kursora; silnik się wyłącza sam, zamiast produkować erratyczny ruch z dotyku.

Slidery i parallax

Dział zatytułowany „Slidery i parallax”

Sceny slider dostają ten sam silnik, podłączony do zewnętrznego wrappera slidera. Każdy slajd może mieć własne warstwy parallax; przechodzenie między slajdami płynnie przekazuje origin parallax z centrum jednego slajdu do następnego.

Dostępność

Dział zatytułowany „Dostępność”

Parę rzeczy do pamiętania:

  • Respect reduced-motion jest domyślnie on dla każdej warstwy parallax. Zostaw to on. Odwiedzający z ustawioną na OS preferencją “Reduce motion” (albo używający asystenckich technologii) zobaczą scenę bez dryfu kursora.
  • Zaburzenia przedsionkowe są realne — nawet łagodny parallax może wywołać dyskomfort u niektórych użytkowników. Konserwatywne wartości depth / tilt zmniejszają ryzyko.
  • Stage intensity = 0 to kill switch, który możesz pstryknąć, jeśli musisz wysłać scenę z wyłączonym parallaxem dla konkretnej kampanii.

Wydajność

Dział zatytułowany „Wydajność”

Silnik throttluje przez requestAnimationFrame — nawet na szybkich maszynach robi co najwyżej jedną aktualizację per klatka. Transformy są composited GPU (translate3d, rotate3d), więc koszt CPU jest niski nawet na wolnych urządzeniach.

Debugowanie

Dział zatytułowany „Debugowanie”

Jeśli parallax nie wygląda jakby działał:

  1. Otwórz DevTools, zbadaj .p2lab-stage__layer-wrap warstwy. Potwierdź, że data-depth / data-tilt są emitowane. Jeśli nie, efekt Parallax warstwy nie jest włączony albo obie wartości są 0.
  2. Sprawdź slider intensywności sceny — jeśli jest na 0, nic się nie rusza.
  3. Potwierdź, że OS nie raportuje reduced-motion (System Preferences → Accessibility → Display → Reduce Motion na macOS, albo ekwiwalent w Windows).
  4. Potwierdź, że urządzenie nie raportuje coarse pointer (parallax jest świadomie wyłączony na touch).

Gdzie dalej

Dział zatytułowany „Gdzie dalej”