scroll-experience
Créer des Animations de Défilement Immersives
Créez des expériences web cinématographiques basées sur le défilement avec une narration parallaxe et des animations engageantes qui captivent l'attention des utilisateurs dès le premier scroll.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "scroll-experience". Create a parallax effect for my product page hero
النتيجة المتوقعة:
Une section hero avec trois couches de profondeur : image d'arrière-plan à 0.2x la vitesse de défilement, visuel du produit à 0.5x, et texte du titre à vitesse normale. Utilisez le positionnement sticky CSS pour le conteneur et GSAP pour un mouvement parallaxe fluide.
استخدام "scroll-experience". Add scroll-triggered text reveals
النتيجة المتوقعة:
Des éléments de texte qui animent leur apparition en utilisant une combinaison d'opacité et de transformation. Utilisez la position de défilement pour déclencher : 0% affiche le premier mot en surbrillance, 50% affiche le deuxième, avec des transitions fluides entre les états.
استخدام "scroll-experience". Build a step-by-step process section
النتيجة المتوقعة:
Une section épinglée où chaque étape apparaît en fondu séquentiellement lorsque l'utilisateur défile. Les étapes sont centrées avec un indicateur de progression montrant la position actuelle. Utilise GSAP ScrollTrigger avec des marqueurs pour un timing précis.
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
Concepteur de Landing Pages
Créez des pages d'atterrissage produit époustouflantes avec des révélations pilotées par le défilement qui guident les utilisateurs progressivement à travers les fonctionnalités
Narrateur Interactif
Construisez des expériences narratives où le défilement fait avancer une histoire avec des arrière-plans parallaxe et du texte animé
Améliorateur de Portfolio
Transformez les portfolios personnels en expériences engageantes qui présentent le travail à travers des animations déclenchées au défilement
جرّب هذه الموجهات
J'ai besoin d'une animation simple déclenchée au défilement pour ma landing page. Lorsque les utilisateurs défilent jusqu'à une section, les éléments doivent apparaître en fondu et se déplacer vers le haut. Utilisez GSAP ScrollTrigger avec un effet de lissage (scrub).
Créez une section hero avec une profondeur parallaxe. Je veux plusieurs couches se déplaçant à des vitesses différentes : arrière-plan à 0.2x, mi-plan à 0.5x, et premier plan à vitesse normale. Le contenu doit rester lisible.
Construisez une section épinglée où le texte reste fixé à gauche tandis que les images défilent à droite. Utilisez GSAP pour épingler sur 1000px et animer le contenu séquentiellement au défilement de l'utilisateur.
Convertissez le défilement vertical en mouvement horizontal pour une galerie d'images. Lorsque les utilisateurs défilent au-delà d'un point de déclenchement, l'expérience doit se verrouiller en mode de défilement horizontal jusqu'à ce que la galerie soit terminée.
أفضل الممارسات
- Commencez par une conception mobile-first - testez les interactions de défilement sur les appareils tactiles avant d'ajouter de la complexité desktop
- Utilisez CSS scroll-timeline pour les animations simples afin de réduire la dépendance JavaScript et d'améliorer les performances
- Gardez les durées d'animation sous 300ms pour les animations liées au défilement afin de maintenir la réactivité
- Fournissez toujours un contenu statique de secours pour les utilisateurs qui préfèrent un mouvement réduit
تجنب
- Détournement du défilement - ne remplacez jamais complètement le comportement de défilement natif, les utilisateurs perdent le contrôle et deviennent frustrés
- Surcharge d'animation - trop d'éléments en mouvement distraient du contenu et nuisent aux performances
- Expériences desktop uniquement - les utilisateurs mobiles représentent la majorité et méritent la même qualité d'expérience
- Ignorer l'accessibilité - assurez-vous que les animations de défilement respectent prefers-reduced-motion et sont navigables au clavier