Orqestria Letöltés
← Webalkalmazás fejlesztők adatlapja

Skill · 1.0.0 verzió

Görgetésvezérelt történetmesélés

Világos termékállapot-sorozattá alakítja a görgetést a természetes vezérlés megőrzésével.

scroll-based-storytelling

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha fokozatos vizuális bemutatóval magyarázol terméket.

Miben segít neked?

  • Effektválasztás előtt kijelöli a fő tárgyat és történeti lépéseket.
  • Támogatott görgetési animációt használ navigációs csapda nélkül.
  • Eszközhöz és csökkentett mozgáshoz igazítja az olvasható bemutatót.

Például ezt kérheted

Készíts négylépéses görgetős termékbemutatót, csökkentett mozgásnál olvasható statikus tartalommal. Ugorj közvetlenül a harmadik részre, majd válts telefonméretre. Minden lépés maradjon olvasható, a rögzített jelenet ne fogja el a görgetést.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Scroll-Based Storytelling

Scroll-linked scenes turn a static page into a user-paced narrative where scrolling scrubs through progressive product states. Keep the user in control of the scrollbar at all times—never hijack native scroll physics without a clear escape hatch.

Narrative Choreography Before Effects

Structure every scroll story around clear beats rather than simultaneous visual noise:

  1. Establish the anchor element: Keep one primary focal object (e.g., an interactive product frame, architectural diagram, or device viewport) stable while surrounding callouts and internal UI states evolve step by step.
  2. One visual change per beat: Sequence transformations (Step 1: problem context $\rightarrow$ Step 2: action triggered $\rightarrow$ Step 3: live state transition $\rightarrow$ Step 4: measurable outcome) with breathing room (scroll distance buffer) between steps so fast scrollers still register each takeaway.
  3. Progressive disclosure over scroll-jacking: Let native browser scrolling drive timeline progress (scrub: true or CSS animation-timeline: view()). Never trap wheel/touch events in custom scroll locks that prevent the user from scrolling past a section.

Implementation Patterns: CSS Scroll Timelines & JS Scrubbing

Scenario Recommended Approach Key Implementation Rules
Progress bars, parallax headers, card reveal on enter (view()) CSS Scroll-Driven Animations (animation-timeline: scroll() / view()) with @supports (animation-timeline: view()) progressive enhancement Runs entirely on the compositor thread with zero main-thread scroll jitter
Multi-step pinned product walkthrough with synchronized copy and UI state changes Timeline Scrubbing (e.g., gsap.timeline({ scrollTrigger: { trigger, pin, scrub, start, end } }) or IntersectionObserver step state machine) Attach scrollTrigger to the parent timeline (never to individual child tweens inside a timeline)
Narrative text blocks triggering discrete interactive states in a sticky preview pane position: sticky + IntersectionObserver thresholds Avoids JS pinning wrappers; clean fallback on narrow mobile viewports

Edge Cases Every Scroll Scene Must Handle

  • Mid-page reload & deep-link jumps (#hash): Users frequently refresh halfway down the page or jump via anchor links. Ensure timelines compute initial progress immediately on mount and after fonts/images settle (ScrollTrigger.refresh()).
  • Fast scroll & reverse scroll: Scrubbed timelines must be 100% reversible (onEnter, onLeave, onEnterBack, onLeaveBack). Avoid imperative one-way DOM mutations inside scroll callbacks that break when the user scrolls back up.
  • Responsive breakpoint adaptation: A 4-column pinned desktop showcase often overcrowds a 375px mobile screen. Use gsap.matchMedia() or CSS @media queries to switch mobile viewports to a stacked sticky-header or swipeable step layout when vertical height is constrained.
  • Reduced-motion fallback: When prefers-reduced-motion: reduce is active, disable continuous scroll scrubbing and pinning distance multipliers; display each narrative stage as a clean, readable static section or instant state switch.

Csomagban lévő fájlok 1

  • SKILL.md