scroll-experience
Build Immersive Scroll Animations
Create cinematic scroll-driven web experiences with parallax storytelling and engaging animations that capture user attention from first scroll.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「scroll-experience」を使用しています。 Create a parallax effect for my product page hero
期待される結果:
A hero section with three depth layers: background image at 0.2x scroll speed, product visual at 0.5x, and headline text at normal speed. Use CSS sticky positioning for the container and GSAP for smooth parallax movement.
「scroll-experience」を使用しています。 Add scroll-triggered text reveals
期待される結果:
Text elements that animate in using a combination of opacity and transform. Use scroll position to trigger: 0% shows first word highlighted, 50% shows second, with smooth transitions between states.
「scroll-experience」を使用しています。 Build a step-by-step process section
期待される結果:
A pinned section where each step fades in sequentially as the user scrolls. Steps are centered with a progress indicator showing current position. Uses GSAP ScrollTrigger with markers for precise timing.
セキュリティ監査
安全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.
品質スコア
作れるもの
Landing Page Designer
Create stunning product landing pages with scroll-driven reveals that guide users through features progressively
Interactive Storyteller
Build narrative experiences where scrolling advances a story with parallax backgrounds and animated text
Portfolio Enhancer
Transform personal portfolios into engaging experiences that showcase work through scroll-triggered animations
これらのプロンプトを試す
I need a simple scroll-triggered animation for my landing page. When users scroll to a section, elements should fade in and move up. Use GSAP ScrollTrigger with a smooth scrub effect.
Create a hero section with parallax depth. I want multiple layers moving at different speeds: background at 0.2x, midground at 0.5x, and foreground at normal speed. The content should remain readable.
Build a sticky section where text stays pinned on the left while images scroll on the right. Use GSAP to pin for 1000px and animate content sequentially as user scrolls.
Convert vertical scroll into horizontal movement for an image gallery. When users scroll past a trigger point, the experience should lock into horizontal scroll mode until the gallery completes.
ベストプラクティス
- Start with mobile-first design - test scroll interactions on touch devices before adding desktop complexity
- Use CSS scroll-timeline for simple animations to reduce JavaScript dependency and improve performance
- Keep animation durations under 300ms for scroll-linked animations to maintain responsiveness
- Always provide fallback static content for users who prefer reduced motion
回避
- Scroll hijacking - never override native scroll behavior completely, users lose control and become frustrated
- Animation overload - too many moving elements distract from content and hurt performance
- Desktop-only experiences - mobile users represent the majority and deserve the same quality experience
- Ignoring accessibility - ensure scroll animations respect prefers-reduced-motion and are keyboard navigable