Back to Details

scroll-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Scroll Animations

滚动动画

Apply Disney's 12 principles to scroll-triggered motion.
将迪士尼的12条动画原则应用于滚动触发的动效。

Principle Application

原则应用

Squash & Stretch: Elements can compress slightly while scrolling fast, settle when stopped.
Anticipation: Content should be slightly visible before full reveal. Start animations at 10-20% visibility.
Staging: Reveal content in reading order. Top-to-bottom, left-to-right progression.
Straight Ahead vs Pose-to-Pose: Define clear "hidden" and "revealed" poses. Scroll position interpolates between them.
Follow Through & Overlapping: Stagger reveals. First element triggers at 20% viewport, next at 25%, etc.
Slow In/Slow Out: Use ease-out for reveals triggered by scroll. Content settles into place.
Arcs: Parallax elements move on curves relative to scroll. Slight horizontal offset as vertical scroll occurs.
Secondary Action: Fade + slide + scale can combine for richer reveals.
Timing:
  • Reveal animation: 400-600ms (allows scroll to continue)
  • Parallax: real-time, 1:1 or fractional ratios
  • Sticky transitions: 200-300ms
Exaggeration: Subtle for scroll - users control the pace. Let scroll speed be the exaggeration.
Solid Drawing: Elements should never jump or teleport. Smooth interpolation at all scroll positions.
Appeal: Scroll animations should reward exploration, not obstruct it.
Squash & Stretch（挤压与拉伸）：快速滚动时元素可轻微压缩，停止滚动后恢复原状。
Anticipation（预备动作）：内容在完全显示前应先轻微可见。在可见度达到10-20%时启动动画。
Staging（分阶段呈现）：按照阅读顺序展示内容，遵循从上到下、从左到右的顺序。
Straight Ahead vs Pose-to-Pose（逐帧动画与关键帧动画）：明确定义“隐藏”和“显示”两种关键状态，根据滚动位置在两种状态间平滑过渡。
Follow Through & Overlapping（跟随动作与重叠动作）：错开元素的渐显时机。第一个元素在视口可见度达20%时触发，下一个在25%时触发，以此类推。
Slow In/Slow Out（缓入缓出）：滚动触发的渐显动效使用ease-out缓动函数，让内容自然归位。
Arcs（弧线运动）：视差元素随滚动沿曲线运动。垂直滚动时产生轻微的水平偏移。
Secondary Action（次要动作）：可组合淡入、滑动、缩放效果，实现更丰富的渐显动效。
Timing（时序）:
  • 渐显动画：400-600ms（允许用户继续滚动）
  • 视差滚动：实时，1:1或比例缩放
  • 粘性头部过渡：200-300ms
Exaggeration（夸张）：滚动动效的夸张需适度，由用户控制滚动速度来体现夸张程度。
Solid Drawing（扎实的造型）：元素绝不能出现跳跃或瞬移，在所有滚动位置都应保持平滑过渡。
Appeal（吸引力）：滚动动画应能为探索内容带来愉悦感，而非阻碍用户操作。

Timing Recommendations

时序建议

Scroll AnimationDurationTrigger PointEasing
Fade In500ms20% visibleease-out
Slide Up600ms15% visibleease-out
Parallaxreal-timecontinuouslinear
Sticky Header200msthresholdease-out
Progress Barreal-timecontinuouslinear
Section Reveal600ms25% visibleease-out
滚动动画类型时长触发时机缓动函数
淡入500ms可见度达20%ease-out
向上滑动600ms可见度达15%ease-out
视差滚动实时持续触发linear
粘性头部200ms达到阈值时ease-out
进度条实时持续触发linear
区块渐显600ms可见度达25%ease-out

Implementation Patterns

实现模式

css
/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 500ms ease-out, transform 600ms ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CSS-only parallax */
.parallax-container {
  perspective: 1px;
  overflow-y: auto;
}

.parallax-slow {
  transform: translateZ(-1px) scale(2);
}
css
/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 500ms ease-out, transform 600ms ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CSS-only parallax */
.parallax-container {
  perspective: 1px;
  overflow-y: auto;
}

.parallax-slow {
  transform: translateZ(-1px) scale(2);
}

Intersection Observer Pattern

Intersection Observer 实现模式

javascript
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.2, rootMargin: '0px 0px -10% 0px' }
);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
javascript
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.2, rootMargin: '0px 0px -10% 0px' }
);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Scroll-Linked Animation (CSS)

滚动关联动画（CSS）

css
@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.scroll-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

Key Rules

核心规则

  1. Never block scroll or hijack scroll behavior
  2. Animations should complete within viewport, not require precise scroll position
  3. Trigger early (10-20% visible) so animation completes before full view
  4. Provide 
    prefers-reduced-motion
    alternative - instant reveals, no parallax
  5. Test on mobile - scroll animations must be smooth at 60fps
  1. 绝不能阻塞滚动或劫持滚动行为
  2. 动画应在视口内完成，无需用户精准控制滚动位置
  3. 提前触发动画（可见度10-20%时），确保在内容完全进入视口前完成动画
  4. 提供
    prefers-reduced-motion
    替代方案——直接显示内容，不使用视差滚动
  5. 在移动端测试——滚动动画需保持60fps流畅运行