scroll-animations by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill scroll-animations将迪士尼的 12 条动画原则应用于滚动触发的动效。
挤压与拉伸:元素在快速滚动时可以轻微压缩,停止时恢复原状。
预备动作:内容在完全显示前应略微可见。在可见度为 10-20% 时开始动画。
演出布局:按阅读顺序显示内容。遵循从上到下、从左到右的进程。
逐帧动画与关键帧动画:定义清晰的"隐藏"和"显示"关键姿势。滚动位置在两者之间进行插值。
跟随与重叠动作:错开显示。第一个元素在视口 20% 时触发,下一个在 25% 时触发,依此类推。
慢入慢出:对滚动触发的显示使用缓出效果。内容平稳地进入位置。
弧线运动:视差元素相对于滚动沿曲线移动。垂直滚动时产生轻微的水平偏移。
次要动作:淡入 + 滑动 + 缩放可以组合使用,以实现更丰富的显示效果。
时间节奏:
夸张手法:滚动动画应保持微妙 - 用户控制节奏。让滚动速度成为夸张的来源。
扎实的描绘:元素绝不应跳跃或瞬间移动。在所有滚动位置都应平滑插值。
吸引力:滚动动画应奖励探索,而不是阻碍它。
| 滚动动画 | 持续时间 | 触发点 | 缓动函数 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 淡入 | 500 毫秒 | 20% 可见 | ease-out |
| 向上滑动 | 600 毫秒 | 15% 可见 | ease-out |
| 视差 | 实时 | 连续 | linear |
| 粘性头部 | 200 毫秒 | 阈值 | ease-out |
| 进度条 | 实时 | 连续 | linear |
| 区块显示 | 600 毫秒 | 25% 可见 | ease-out |
/* 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);
}
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));
@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%;
}
prefers-reduced-motion 替代方案 - 即时显示,无视差每周安装量
107
代码仓库
GitHub 星标数
18
首次出现
2026 年 1 月 24 日
安全审计
安装于
codex93
gemini-cli91
opencode89
github-copilot84
cursor75
amp73
Apply Disney's 12 principles to scroll-triggered motion.
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 :
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.
| Scroll Animation | Duration | Trigger Point | Easing |
|---|---|---|---|
| Fade In | 500ms | 20% visible | ease-out |
| Slide Up | 600ms | 15% visible | ease-out |
| Parallax | real-time | continuous | linear |
| Sticky Header | 200ms | threshold | ease-out |
| Progress Bar | real-time | continuous | linear |
| Section Reveal | 600ms | 25% visible | ease-out |
/* 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);
}
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));
@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%;
}
prefers-reduced-motion alternative - instant reveals, no parallaxWeekly Installs
107
Repository
GitHub Stars
18
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex93
gemini-cli91
opencode89
github-copilot84
cursor75
amp73
Flutter布局指南:构建响应式UI的约束规则与自适应设计模式
1,200 周安装