🆕 Bricks 2.4 已发布:查询循环性能提升 40%,迁移教程同步更新 →

首页 / 中文教程 / 教程

Bricks Fancy Animations 动画组件

教程:用 Bricks 生态的动画扩展零代码加淡入、视差、滚动触发等效果,并讲清克制动效的原则。

Ray ChanRay Chan·2026-08-20·约 1 分钟
目录
  1. 1.什么是 Fancy Animations
  2. 2.常见动画类型
  3. 3.怎么用
  4. 4.注意事项
  5. 5.小结

想让页面更生动?Bricks 生态里有 Fancy Animations 这类组件/扩展,提供现成的入场、滚动、悬停动画。本文讲怎么用。

什么是 Fancy Animations

它是一类为 Bricks 提供的动画能力扩展(常见于 Bricks 生态的第三方附加组件),让你不用写代码就能给元素加淡入、位移、视差、滚动触发等效果。

常见动画类型

  • 入场动画:元素进入视口时淡入/上移。
  • 悬停动画:鼠标移上时的微交互。
  • 滚动驱动:随滚动进度触发位移/缩放(视差感)。
  • 数字滚动、文字逐字出现等花活。

怎么用

  1. 装好对应动画扩展/组件。
  2. 选中元素,在其设置里找到动画相关面板,选动画类型与参数(时长、延迟、缓动)。
  3. 预览前台,确认在到达视口时按预期触发。

注意事项

动画是锦上添花,别滥用:过多动效会拖慢感知速度、干扰阅读。移动端尤其要克制,必要时关掉部分动画。

小结

Fancy Animations 类组件让 Bricks 页面「会动」变得零代码:选类型 → 调参数 → 预览。记住克制原则,动效才加分不扣分。


内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

延伸阅读