mcpField
S
scroll-animations

scroll-animations

github.com/dylantarre设计与 UI1321.1k 次安装43 周前更新
代码仓库

关于 scroll-animations

面向前端设计与开发的滚动动画技能，将 Disney 的 12 条动画原则用于滚动触发的动效。内容包括触发时机、视差、实现模式及减少动态效果的替代方案。

主要功能

  1. 01将动画原则用于滚动动效
  2. 02提供滚动触发时序建议
  3. 03介绍 Intersection Observer 模式
  4. 04说明 CSS 滚动关联动画
  5. 05包含减少动态效果的替代方案

适用场景

  1. 01制作随滚动出现的内容
  2. 02设置视差或粘性标题动效
  3. 03为滚动进度条添加动画
  4. 04为减少动态效果偏好提供替代方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill scroll-animations

安装后在 Claude Code 中输入/scroll-animations确认已加载。

详细介绍

滚动动画

将迪士尼的 12 条原则应用于滚动触发的动效。

原则应用

挤压与拉伸：快速滚动时，元素可以略微压缩；停止滚动时恢复原状。

预备动作：内容应在完全显示前稍微可见。可见度达到 10-20% 时开始动画。

舞台调度：按阅读顺序显示内容，从上到下、从左到右依次呈现。

连续动作与关键姿势：定义清晰的“隐藏”和“显示”姿势。滚动位置决定两者之间的插值。

跟随与重叠：错开显示时机。第一个元素在进入视口 20% 时触发，下一个在 25% 时触发，依此类推。

慢入与慢出：使用缓出效果呈现滚动触发的内容，让内容平稳到位。

弧线运动：视差元素随滚动沿曲线移动。垂直滚动时略微水平偏移。

次要动作：淡入、滑动和缩放可以组合使用，让显示效果更加丰富。

时长：

  • 显示动画：400-600ms（允许滚动继续）
  • 视差：实时，比例为 1:1 或小于 1:1
  • 粘性过渡：200-300ms

夸张：滚动动画应保持微妙，因为节奏由用户控制。让滚动速度成为夸张的表现形式。

扎实绘制：元素不应突然跳动或瞬移。所有滚动位置上的插值都应平滑。

吸引力：滚动动画应鼓励用户探索，而非妨碍探索。

时长建议

滚动动画时长触发点缓动
淡入500ms可见度 20%缓出
向上滑入600ms可见度 15%缓出
视差实时持续线性
粘性页眉200ms阈值缓出
进度条实时持续线性
区块显示600ms可见度 25%缓出

实现模式

/* 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 模式

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));

滚动联动动画（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%;
}

关键规则

  1. 绝不阻止滚动或劫持滚动行为
  2. 动画应在视口内完成，不应要求精确的滚动位置
  3. 尽早触发（可见度达到 10-20%），确保动画在完全进入视口前完成
  4. 提供 prefers-reduced-motion 替代方案：立即显示，不使用视差
  5. 在移动设备上测试，确保滚动动画达到 60fps 且流畅

评论

支持 Markdown