Fähigkeiten scroll-experience
đź“ś

scroll-experience

Sicher

Erstellen Sie immersives Scroll-Animationen

Erstellen Sie filmische, scrollgesteuerte Web-Erlebnisse mit Parallax-Storytelling und fesselnden Animationen, die die Aufmerksamkeit der Benutzer vom ersten Scroll an fesseln.

UnterstĂĽtzt: Claude Codex Code(CC)
đź“Š 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "scroll-experience". Erstellen Sie einen Parallax-Effekt fĂĽr meinen Produktseiten-Hero

Erwartetes Ergebnis:

Ein Hero-Abschnitt mit drei Tiefeebenen: Hintergrundbild mit 0,2x-Scrollgeschwindigkeit, Produktvisualisierung mit 0,5x und Schlagzeilentext mit normaler Geschwindigkeit. Verwenden Sie CSS-Sticky-Positionierung fĂĽr den Container und GSAP fĂĽr sanfte Parallax-Bewegung.

Verwendung von "scroll-experience". FĂĽgen Sie scrollgetriggerte Text-Reveals hinzu

Erwartetes Ergebnis:

Textelemente, die mit einer Kombination aus Deckkraft und Transformation animieren. Verwenden Sie Scroll-Position zum Auslösen: 0% zeigt das erste Wort hervorgehoben, 50% zeigt das zweite, mit sanften Übergängen zwischen Zuständen.

Verwendung von "scroll-experience". Erstellen Sie einen schrittweisen Prozessabschnitt

Erwartetes Ergebnis:

Ein fixierter Abschnitt, bei dem jeder Schritt sequenziell einblendet, während der Benutzer scrollt. Schritte sind zentriert mit einem Fortschrittsindikator, der die aktuelle Position anzeigt. Verwendet GSAP ScrollTrigger mit Markierungen für präzises Timing.

Sicherheitsaudit

Sicher
v1 • 2/25/2026

This skill is a front-end development resource for scroll-driven web experiences. Static findings flagged 'external_commands' (backtick execution) and 'weak cryptographic algorithms' - both are FALSE POSITIVES. The backticks are markdown code fence delimiters, not shell commands. The crypto detections are substring matches in words like 'experiences' and 'interactive'. No actual security risks exist. This skill only provides JavaScript, React, and CSS code examples for scroll animations.

1
Gescannte Dateien
268
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Landing-Page-Designer

Erstellen Sie atemberaubende Produkt-Landing-Pages mit scrollgesteuerten EnthĂĽllungen, die Benutzer schrittweise durch Funktionen fĂĽhren

Interaktiver Storyteller

Erstellen Sie narrative Erlebnisse, bei denen das Scrollen eine Geschichte mit Parallax-HintergrĂĽnden und animiertem Text vorantreibt

Portfolio-Enhancer

Verwandeln Sie persönliche Portfolios in fesselnde Erlebnisse, die Arbeit durch scrollgetriggerte Animationen präsentieren

Probiere diese Prompts

Einfache Scroll-Animation 
Ich benötige eine einfache scrollgetriggerte Animation für meine Landing-Page. Wenn Benutzer zu einem Abschnitt scrollen, sollten Elemente einblenden und sich nach oben bewegen. Verwenden Sie GSAP ScrollTrigger mit einem sanften Scrub-Effekt.
Parallax-Hero-Abschnitt 
Erstellen Sie einen Hero-Abschnitt mit Parallax-Tiefe. Ich möchte mehrere Ebenen, die sich mit unterschiedlichen Geschwindigkeiten bewegen: Hintergrund mit 0,2x, Mittelgrund mit 0,5x und Vordergrund mit normaler Geschwindigkeit. Der Inhalt sollte lesbar bleiben.
Sticky-Story-Abschnitt 
Erstellen Sie einen Sticky-Abschnitt, bei dem der Text links fixiert bleibt, während Bilder rechts scrollen. Verwenden Sie GSAP, um 1000px zu fixieren und Inhalte sequenziell zu animieren, während der Benutzer scrollt.
Horizontale Scroll-Galerie 
Konvertieren Sie vertikales Scrollen in horizontale Bewegung fĂĽr eine Bildergalerie. Wenn Benutzer ĂĽber einen Triggerpunkt scrollen, sollte das Erlebnis in den horizontalen Scroll-Modus wechseln, bis die Galerie abgeschlossen ist.

Bewährte Verfahren

  • Beginnen Sie mit Mobile-First-Design – testen Sie Scroll-Interaktionen auf Touch-Geräten, bevor Sie Desktop-Komplexität hinzufĂĽgen
  • Verwenden Sie CSS scroll-timeline fĂĽr einfache Animationen, um JavaScript-Abhängigkeit zu reduzieren und die Performance zu verbessern
  • Halten Sie Animationsdauern unter 300ms fĂĽr scrollverknĂĽpfte Animationen, um die Reaktionsfähigkeit zu erhalten
  • Stellen Sie immer statische Fallback-Inhalte fĂĽr Benutzer bereit, die reduzierte Bewegung bevorzugen

Vermeiden

  • Scroll-Hijacking – ĂĽberschreiben Sie niemals das native Scroll-Verhalten vollständig, Benutzer verlieren die Kontrolle und werden frustriert
  • AnimationsĂĽberladung – zu viele bewegte Elemente lenken vom Inhalt ab und beeinträchtigen die Performance
  • Desktop-nur Erlebnisse – mobile Benutzer machen die Mehrheit aus und verdienen das gleiche Qualitäts-Erlebnis
  • Barrierefreiheit ignorieren – stellen Sie sicher, dass Scroll-Animationen prefers-reduced-motion respektieren und mit der Tastatur navigierbar sind

Häufig gestellte Fragen

Welche Bibliotheken funktionieren am besten fĂĽr Scroll-Animationen?
GSAP ScrollTrigger ist am mächtigsten für komplexe Animationen. Framer Motion ist ideal für React-Projekte. Lenis bietet sanftes Scrollen mit minimalem Setup. CSS scroll-timeline ist am besten für einfache native Animationen.
Wie verhindere ich Scroll-Jank und Stottern?
Verwenden Sie will-change sparsam, vermeiden Sie die Animation von Layout-Eigenschaften wie Breite und Höhe, bevorzugen Sie Transform und Deckkraft und verwenden Sie requestAnimationFrame. Testen Sie auf tatsächlichen mobilen Geräten während der Entwicklung.
Funktionieren Scroll-Animationen auf Mobilgeräten?
Ja, aber halten Sie Effekte einfacher. Touch-Scroll hat ein anderes Timing als Mausrad. Verwenden Sie Bibliotheken wie Lenis für sanftes Scrollen und testen Sie ausführlich auf echten Geräten.
Wie gehe ich mit Benutzern um, die reduzierte Bewegung bevorzugen?
ĂśberprĂĽfen Sie window.matchMedia('(prefers-reduced-motion: reduce)') und stellen Sie statische Fallbacks bereit. Deaktivieren Sie Scrub-Animationen und reduzieren Sie die Animationsdauer fĂĽr diese Benutzer.
Was ist der Unterschied zwischen Parallax- und scrollgetriggerten Animationen?
Parallax erstellt Tiefe, indem Ebenen gleichzeitig mit unterschiedlichen Geschwindigkeiten bewegt werden. Scrollgetriggerte Animationen feuern bei bestimmten Scroll-Positionen. Sie können für reiche Erlebnisse kombiniert werden.
Wie integriere ich Scroll-Animationen mit vorhandenen Frameworks?
Die meisten Scroll-Bibliotheken funktionieren mit jedem Framework. FĂĽr React hat Framer Motion integrierte Scroll-Hooks. FĂĽr Vue empfehlen sich ScrollMagic oder benutzerdefinierte Composables. Vanilla JavaScript funktioniert ĂĽberall.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/scroll-experience

Ref

main

Dateistruktur

đź“„ SKILL.md