滚动动画用于让页面元素随着浏览器滚动逐步进入、移动或变化。它适合用在作品集首页、长图文页面、项目介绍和视觉叙事页面中,让内容出现的节奏更清晰。
在 Cargo 中,滚动动画通常和页面内容、布局、图层顺序以及特效设置一起使用。建议先完成页面结构,再添加动画;这样更容易判断哪些元素需要动、哪些元素应该保持稳定。
使用前先整理页面
添加滚动动画前,先检查页面是否已经具备清晰结构:
- 图片、文本、相册或嵌入内容已经按阅读顺序排列。
- 页面在桌面端和移动端都能正常浏览。
- 重要信息即使没有动画也能被理解。
- 不需要动画的导航、按钮和固定元素保持稳定。
动画应该服务于阅读,而不是让访问者迷失方向。一个页面里只给关键元素设置动画,通常会比所有内容都动更自然。
常见使用方式
你可以把滚动动画理解为“内容进入视口时发生的变化”。常见效果包括:
- 元素从透明变为可见。
- 内容从某个方向轻微移动到原位。
- 图片或文字随着滚动产生层次感。
- 多个元素按顺序出现,形成段落节奏。
如果页面已经使用了背景图、图层叠加、固定页面或其他特效,要特别留意动画之间的关系。过多效果叠加会影响可读性,也可能让页面在移动端显得拥挤。
调整和测试
设置完成后,至少做三轮检查:
- 在预览模式从页面顶部完整滚动到底部,确认每个动画触发时机自然。
- 缩小浏览器宽度,检查移动端是否仍能看到完整内容。
- 关闭编辑器干扰,访问公开页面确认动画和发布版本一致。
如果某个动画让正文阅读变慢,或让按钮、链接变得难以点击,建议降低强度、减少数量,或者只保留在视觉重点区域使用。