滚动触发 · Scroll-triggered Animation
英文：Scroll-triggered Animation
动效与交互难度：入门 ★
🗣️一句话大白话
元素进入视口（屏幕可见范围）才播放动效，滚到才出现。滚动页“逐步揭示”的基础机制，比页面加载时一起动高级得多。默认页面加载时所有元素一起入场，滚动后看不到任何动效。滚动触发是“滚到哪、动到哪”：元素进入视口 20% 时播放入场，离开视口可重置。告诉 AI“滚到才出现、进入视口触发”它就知道用 IntersectionObserver。触发阈值、是否重复播放要说清。
🖼️样图参考
🎬真实场景
长滚动页所有区块入场、图片渐显、统计数字滚动计数
📮你可以这样说
「【图像模型版】[区块] 滚动进入视口时才开始入场动画：淡入+上移 24px，触发点为进入视口 20% 处；滚出视口后重置，再次进入再次播放。 【HTML/CSS/JS 版】用 IntersectionObserver 监听 [区块]，threshold 0.2 时加 .visible 类触发 fade+translateY(24px) 过渡；离开时移除类可重置。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：滚动触发=视差；实际是“进入视口才播放”，与速度无关
- ▸元素已在首屏时仍要触发（不能只等滚动）
🚫什么时候别用
- ✗首屏内容（加载即应出现）
- ✗用户需要快速读完的正文
🧩常见变体
一次性触发每次进入触发按滚动进度比例触发
💡小贴士
- ✦触发阈值 0.1-0.3 最顺手；正文内容别用，影响阅读
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗