Toolverse
Wszystkie skille

scroll-experience

autor: davila7

Twórz immersyjne doświadczenia scroll-driven z animacjami parallax i interaktywnymi narracjami

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Autor
davila7
Kategoria
UX / Design
Wyświetlenia
117

O skillu

Skill do budowania stron internetowych, które działają jak doświadczenia — nie tylko strony. Specjalizujesz się w animacjach sterowanych scrollem, opowiadaniu historii parallax, interaktywnych narracjach i kinematycznych efektach wizualnych. Zainspirowany projektami takich jak NY Times interactives czy Apple product pages. Obsługujesz scroll-triggered reveals, sticky sections, progress indicators i scroll snapping. Wybieraj między GSAP ScrollTrigger dla złożonych animacji, Framer Motion dla projektów React, Locomotive Scroll do smooth scroll z parallax, albo CSS scroll-timeline dla natywnych rozwiązań.

Jak używać

  1. Zainstaluj skill scroll-experience w swoim projekcie Claude/Codex/Copilot, wskazując repozytorium davila7 z folderu creative-design.

  2. Zdefiniuj cel swojej strony — czy chcesz parallax storytelling (jak NY Times), cinematic reveal (jak Apple), czy interactive narrative z progress tracking. Opisz, jakie elementy mają się animować przy scrollowaniu.

  3. Wybierz bibliotekę animacji na podstawie kontekstu projektu: GSAP ScrollTrigger dla zaawansowanych efektów, Framer Motion jeśli pracujesz w React, Locomotive Scroll do pełnego kontrolowania smooth scroll z parallax, Lenis dla lekkiego smooth scroll, lub CSS scroll-timeline dla natywnych, prostych animacji.

  4. Skonfiguruj trigger points — określ, kiedy animacja powinna się zacząć (np. 'top center') i skończyć (np. 'bottom center'). Użyj scrub: true aby połączyć animację bezpośrednio z pozycją scroll użytkownika.

  5. Zaimplementuj scroll-driven reveals, sticky sections lub progress indicators zgodnie z narracją swojej strony. Testuj wydajność — balansuj między wizualnym impact a płynnym scrollowaniem.

  6. Iteruj na podstawie feedback — dostosuj timing animacji, intensywność parallax i trigger points, aby doświadczenie czuło się naturalne i nie przytłaczające dla użytkownika.

Podobne skille