Scroll Experience

davila7/claude-code-templates/cli-tool/components/skills/creative-design/scroll-experience

作者 davila78da17d671b6f無授權條款32K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

僅含說明Design & Creative Software Development

AI 產生的概覽

指導打造沉浸式捲動驅動的網頁體驗：視差敘事、捲動動畫、黏性區塊與電影感敘事。

功能: 這項技能為建立捲動驅動的網頁體驗提供指引與程式碼模式，涵蓋捲動觸發動畫、視差敘事、黏性與固定區塊、橫向捲動區塊以及進度指示器。它比較 GSAP ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis 與原生 CSS scroll-timeline 等動畫方案，並提供電影感頁面的敘事結構。它也列出捲動劫持、動畫過載等反模式，以及捲動卡頓、行動裝置視差與無障礙問題的修正方向。
適用情境: 適合規劃或實作捲動動畫、視差、捲動敘事、互動故事或電影感網頁區塊的情境。適用於著陸頁、產品功能導覽，以及以捲動推動敘事的編輯類互動頁面。
執行需求: 不含指令碼，僅有說明與程式碼範例。實作這些模式需要網頁前端專案，並依所選方案使用 GSAP 與 ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis 等函式庫，或依賴原生 CSS scroll-timeline 支援。

Scroll Experience

Role: Scroll Experience Architect

You see scrolling as a narrative device, not just navigation. You create moments of delight as users scroll. You know when to use subtle animations and when to go cinematic. You balance performance with visual impact. You make websites feel like movies you control with your thumb.

Capabilities

Scroll-driven animations
Parallax storytelling
Interactive narratives
Cinematic web experiences
Scroll-triggered reveals
Progress indicators
Sticky sections
Scroll snapping

Patterns

Scroll Animation Stack

Tools and techniques for scroll animations

When to use: When planning scroll-driven experiences

python

## Scroll Animation Stack
### Library Options| Library | Best For | Learning Curve ||---------|----------|----------------|| GSAP ScrollTrigger | Complex animations | Medium || Framer Motion | React projects | Low || Locomotive Scroll | Smooth scroll + parallax | Medium || Lenis | Smooth scroll only | Low || CSS scroll-timeline | Simple, native | Low |
### GSAP ScrollTrigger Setup```javascriptimport { gsap } from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Basic scroll animationgsap.to('.element', {  scrollTrigger: {    trigger: '.element',    start: 'top center',    end: 'bottom center',    scrub: true, // Links animation to scroll position  },  y: -100,  opacity: 1,});

Framer Motion Scroll

jsx

import { motion, useScroll, useTransform } from 'framer-motion';
function ParallaxSection() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
  return (    <motion.div style={{ y }}>      Content moves with scroll    </motion.div>  );}

CSS Native (2024+)

css

@keyframes reveal {  from { opacity: 0; transform: translateY(50px); }  to { opacity: 1; transform: translateY(0); }}
.animate-on-scroll {  animation: reveal linear;  animation-timeline: view();  animation-range: entry 0% cover 40%;}


### Parallax Storytelling
Tell stories through scroll depth
**When to use**: When creating narrative experiences
```javascript## Parallax Storytelling
### Layer Speeds| Layer | Speed | Effect ||-------|-------|--------|| Background | 0.2x | Far away, slow || Midground | 0.5x | Middle depth || Foreground | 1.0x | Normal scroll || Content | 1.0x | Readable || Floating elements | 1.2x | Pop forward |
### Creating Depth```javascript// GSAP parallax layersgsap.to('.background', {  scrollTrigger: {    scrub: true  },  y: '-20%', // Moves slower});
gsap.to('.foreground', {  scrollTrigger: {    scrub: true  },  y: '-50%', // Moves faster});

Story Beats

Section 1: Hook (full viewport, striking visual)    ↓ scrollSection 2: Context (text + supporting visuals)    ↓ scrollSection 3: Journey (parallax storytelling)    ↓ scrollSection 4: Climax (dramatic reveal)    ↓ scrollSection 5: Resolution (CTA or conclusion)

Text Reveals

Fade in on scroll
Typewriter effect on trigger
Word-by-word highlight
Sticky text with changing visuals


### Sticky Sections
Pin elements while scrolling through content
**When to use**: When content should stay visible during scroll
```javascript## Sticky Sections
### CSS Sticky```css.sticky-container {  height: 300vh; /* Space for scrolling */}
.sticky-element {  position: sticky;  top: 0;  height: 100vh;}

GSAP Pin

javascript

gsap.to('.content', {  scrollTrigger: {    trigger: '.section',    pin: true, // Pins the section    start: 'top top',    end: '+=1000', // Pin for 1000px of scroll    scrub: true,  },  // Animate while pinned  x: '-100vw',});

Horizontal Scroll Section

javascript

const sections = gsap.utils.toArray('.panel');
gsap.to(sections, {  xPercent: -100 * (sections.length - 1),  ease: 'none',  scrollTrigger: {    trigger: '.horizontal-container',    pin: true,    scrub: 1,    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,  },});

Use Cases

Product feature walkthrough
Before/after comparisons
Step-by-step processes
Image galleries


## Anti-Patterns
### ❌ Scroll Hijacking
**Why bad**: Users hate losing scroll control.Accessibility nightmare.Breaks back button expectations.Frustrating on mobile.
**Instead**: Enhance scroll, don't replace it.Keep natural scroll speed.Use scrub animations.Allow users to scroll normally.
### ❌ Animation Overload
**Why bad**: Distracting, not delightful.Performance tanks.Content becomes secondary.User fatigue.
**Instead**: Less is more.Animate key moments.Static content is okay.Guide attention, don't overwhelm.
### ❌ Desktop-Only Experience
**Why bad**: Mobile is majority of traffic.Touch scroll is different.Performance issues on phones.Unusable experience.
**Instead**: Mobile-first scroll design.Simpler effects on mobile.Test on real devices.Graceful degradation.
## ⚠️ Sharp Edges
| Issue | Severity | Solution ||-------|----------|----------|| Animations stutter during scroll | high | ## Fixing Scroll Jank || Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax || Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences || Critical content hidden below animations | medium | ## Content-First Scroll Design |
## Related Skills
Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`

來源與署名

來源：davila7/claude-code-templates位於cli-tool/components/skills/creative-design/scroll-experience提交8da17d6

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 davila7/claude-code-templates 的技能

React Best Practices

davila7

針對 React 與 Next.js 的效能指南，包含 40 多條關於瀑布請求、打包體積、渲染與重渲染的規則。

Software Development32K今天更新

Web Performance Optimization

davila7

指導開發者量測並修正網頁效能問題，例如核心網頁指標、打包體積、圖片與快取。

Software Development32K今天更新

Find Bugs

davila7

審查本機分支變更中的缺陷、安全漏洞與程式碼品質問題，只回報發現而不修改程式碼。

Security32K今天更新

Browser Automation

davila7

指導使用 Playwright 與 Puppeteer 進行瀏覽器自動化，用於測試、擷取與代理瀏覽器控制。

Software Development32K今天更新

Code Review

davila7

依循 Sentry 工程實務指導程式碼審查，涵蓋安全性、效能、測試與設計。

Software Development32K今天更新

Commit

davila7

依照 Sentry 的約定式提交規範格式化 Git 提交訊息，包含問題引用。

Software Development32K今天更新

更多Design & Creative技能

Theme Factory

anthropics

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

Design & Creative179K今天更新

Frontend Design

anthropics

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative179K今天更新

Canvas Design

anthropics

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative179K今天更新

Frontend Design

anthropics

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新

## Scroll Animation Stack
### Library Options| Library | Best For | Learning Curve ||---------|----------|----------------|| GSAP ScrollTrigger | Complex animations | Medium || Framer Motion | React projects | Low || Locomotive Scroll | Smooth scroll + parallax | Medium || Lenis | Smooth scroll only | Low || CSS scroll-timeline | Simple, native | Low |
### GSAP ScrollTrigger Setup```javascriptimport { gsap } from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Basic scroll animationgsap.to('.element', {  scrollTrigger: {    trigger: '.element',    start: 'top center',    end: 'bottom center',    scrub: true, // Links animation to scroll position  },  y: -100,  opacity: 1,});

import { motion, useScroll, useTransform } from 'framer-motion';
function ParallaxSection() {  const { scrollYProgress } = useScroll();  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
  return (    <motion.div style={{ y }}>      Content moves with scroll    </motion.div>  );}

@keyframes reveal {  from { opacity: 0; transform: translateY(50px); }  to { opacity: 1; transform: translateY(0); }}
.animate-on-scroll {  animation: reveal linear;  animation-timeline: view();  animation-range: entry 0% cover 40%;}


### Parallax Storytelling
Tell stories through scroll depth
**When to use**: When creating narrative experiences
```javascript## Parallax Storytelling
### Layer Speeds| Layer | Speed | Effect ||-------|-------|--------|| Background | 0.2x | Far away, slow || Midground | 0.5x | Middle depth || Foreground | 1.0x | Normal scroll || Content | 1.0x | Readable || Floating elements | 1.2x | Pop forward |
### Creating Depth```javascript// GSAP parallax layersgsap.to('.background', {  scrollTrigger: {    scrub: true  },  y: '-20%', // Moves slower});
gsap.to('.foreground', {  scrollTrigger: {    scrub: true  },  y: '-50%', // Moves faster});

Section 1: Hook (full viewport, striking visual)    ↓ scrollSection 2: Context (text + supporting visuals)    ↓ scrollSection 3: Journey (parallax storytelling)    ↓ scrollSection 4: Climax (dramatic reveal)    ↓ scrollSection 5: Resolution (CTA or conclusion)


### Sticky Sections
Pin elements while scrolling through content
**When to use**: When content should stay visible during scroll
```javascript## Sticky Sections
### CSS Sticky```css.sticky-container {  height: 300vh; /* Space for scrolling */}
.sticky-element {  position: sticky;  top: 0;  height: 100vh;}

gsap.to('.content', {  scrollTrigger: {    trigger: '.section',    pin: true, // Pins the section    start: 'top top',    end: '+=1000', // Pin for 1000px of scroll    scrub: true,  },  // Animate while pinned  x: '-100vw',});

const sections = gsap.utils.toArray('.panel');
gsap.to(sections, {  xPercent: -100 * (sections.length - 1),  ease: 'none',  scrollTrigger: {    trigger: '.horizontal-container',    pin: true,    scrub: 1,    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,  },});


## Anti-Patterns
### ❌ Scroll Hijacking
**Why bad**: Users hate losing scroll control.Accessibility nightmare.Breaks back button expectations.Frustrating on mobile.
**Instead**: Enhance scroll, don't replace it.Keep natural scroll speed.Use scrub animations.Allow users to scroll normally.
### ❌ Animation Overload
**Why bad**: Distracting, not delightful.Performance tanks.Content becomes secondary.User fatigue.
**Instead**: Less is more.Animate key moments.Static content is okay.Guide attention, don't overwhelm.
### ❌ Desktop-Only Experience
**Why bad**: Mobile is majority of traffic.Touch scroll is different.Performance issues on phones.Unusable experience.
**Instead**: Mobile-first scroll design.Simpler effects on mobile.Test on real devices.Graceful degradation.
## ⚠️ Sharp Edges
| Issue | Severity | Solution ||-------|----------|----------|| Animations stutter during scroll | high | ## Fixing Scroll Jank || Parallax breaks on mobile devices | high | ## Mobile-Safe Parallax || Scroll experience is inaccessible | medium | ## Accessible Scroll Experiences || Critical content hidden below animations | medium | ## Content-First Scroll Design |
## Related Skills
Works well with: `3d-web-experience`, `frontend`, `ui-design`, `landing-page-design`