想让页面更生动?Bricks 生态里有 Fancy Animations 这类组件/扩展,提供现成的入场、滚动、悬停动画。本文讲怎么用。
什么是 Fancy Animations
它是一类为 Bricks 提供的动画能力扩展(常见于 Bricks 生态的第三方附加组件),让你不用写代码就能给元素加淡入、位移、视差、滚动触发等效果。
常见动画类型
- 入场动画:元素进入视口时淡入/上移。
- 悬停动画:鼠标移上时的微交互。
- 滚动驱动:随滚动进度触发位移/缩放(视差感)。
- 数字滚动、文字逐字出现等花活。
怎么用
- 装好对应动画扩展/组件。
- 选中元素,在其设置里找到动画相关面板,选动画类型与参数(时长、延迟、缓动)。
- 预览前台,确认在到达视口时按预期触发。
注意事项
动画是锦上添花,别滥用:过多动效会拖慢感知速度、干扰阅读。移动端尤其要克制,必要时关掉部分动画。
小结
Fancy Animations 类组件让 Bricks 页面「会动」变得零代码:选类型 → 调参数 → 预览。记住克制原则,动效才加分不扣分。
内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。
延伸阅读
Bricks 精美动画组件 Fancy Animations——滚动入场与悬停动画点选即用
教程:想给 Bricks 元素加滚动入场和鼠标悬停动画?Fancy Animations 这款 Bricks 插件把效果做成预设类,复制类名即可套用,不用手写 CSS。
tutorialBricksExtras 插件介绍
教程:BricksExtras 是 Bricks 生态热门第三方扩展,补齐目录、阅读进度、滑块等实用组件。讲它是什么、能干什么、怎么装。
tutorialBricks 元素的悬停样式设置
教程:用 Bricks 每个元素的悬停态,做出变色、放大、位移等交互质感,低成本提升页面高级感。
tutorialBricks 制作弹出框 Popup 模板
教程:用 Bricks 的 Popup 模板做订阅框、公告浮层,并配置自动/按钮触发与关闭方式。
