Parallax
Warstwy przesuwane przez yPercent ze scrub. Żadnej animacji top ani margin — te wymuszałyby przeliczanie layoutu przy każdej klatce.
Demo techniczne
Bootstrap 5 (SCSS, wybrane moduły) · natywny JavaScript ES6, zero jQuery · Webpack z npm run build · GSAP + ScrollTrigger.
Przewiń, żeby zobaczyć parallax, wejścia elementów, liczniki i sekcję przypiętą.
Warstwy przesuwane przez yPercent ze scrub. Żadnej animacji top ani margin — te wymuszałyby przeliczanie layoutu przy każdej klatce.
Ta sekcja jest przypięta, a tor przesuwa się poziomo. Dystans liczony funkcją, nie stałą — po zmianie szerokości okna invalidateOnRefresh przelicza go od nowa.
Poniżej 768 px pinowanie jest wyłączone, a tor staje się zwykłym przewijaniem poziomym. Przechwytywanie scrolla na telefonie psuje się bardziej, niż pomaga.
Przy prefers-reduced-motion: reduce animacje nie startują, a treść jest widoczna od razu. Zmiana ustawienia w systemie przebudowuje scenę bez przeładowania strony.
Każdy efekt to osobny moduł ES6 z jedną odpowiedzialnością. Rejestracja pluginów GSAP w jednym miejscu — vendor/gsap.js.
npm install → npm run build → katalog dist/ z zahaszowanymi nazwami plików, wydzielonym CSS i osobnym chunkiem bibliotek.