Bricks 滚动自定义动画：无需任何插件的 IntersectionObserver 方案

“3 个自定义动画示例”

• text: “引入 JavaScript”

• text: “结论”

— 本教程提供一套 JavaScript + CSS 代码，让你在 Bricks Builder 里实现滚动进入视口时触发的自定义 CSS 动画，全程不需要任何第三方插件——不装 GSAP、不装滚动动画插件。 ## 3 个自定义动画示例 核心套路都一样：给要动画的元素加一个触发类 custom-animation-on-scroll（这个类不用写任何样式，只用来让 JS 找到目标），再加一个动画类（如 slide-up），把动画效果都写在动画类上。 ### Slide-up（上滑淡入） 1. 新建一个类 custom-animation-on-scroll，赋给要动画的元素。

2. 给同一个元素再加一个类 slide-up，设置以下 CSS： - Opacity 设为 0 - Transform: translateY 设为 40px（初始向下偏移 40px） - Transition 同时过渡 opacity 和 transform，配一个平滑的缓动曲线 3. 最后把下面的 CSS 加到页面里，作用是：在构建器编辑页里禁用动画，以及动画完成后恢复元素原样。常见的粘贴位置： - 子主题的 style.css、主题自定义器，或 Bricks → Settings → Custom Code → Custom CSS（记得用 <style></style> 标签包起来）——全站生效 - 第三方 Code Snippets 插件里 - Code 元素里（同样用 <style></style> 包裹）——仅单页生效 css [data-builder-mode] .custom-animation-on-scroll.slide-up, .custom-animation-on-scroll.slide-up.active { opacity: 1; transform: translate(0); } ### Zoom-in（缩放进入） 和 slide-up 同样的步骤：元素加 custom-animation-on-scroll 触发 JS，再加一个 zoom-in 类做样式： - Transform: scaleX 和 scaleY 设为 0（初始缩到 0） - Transition 过渡 transform 属性，配缓动 按前面 slide-up 同样的逻辑加这段 CSS： css [data-builder-mode] .custom-animation-on-scroll.zoom-in, .custom-animation-on-scroll.zoom-in.active { transform: scale(1); } ### Color-in（色彩还原） 这个效果玩的是 CSS filter 属性的过渡。同样先给元素加 custom-animation-on-scroll 触发类，再新建并定制 color-in 类： - Brightness（亮度）设为 200%

• Opacity（不透明度）设为 20%

• Saturation（饱和度）设为 0%（灰白效果）

• Transition 过渡 filter 属性，配好看的缓动 然后复制粘贴下面的 CSS（粘贴位置参考 slide-up 那节的说明）： css [data-builder-mode] .custom-animation-on-scroll.color-in, .custom-animation-on-scroll.color-in.active { filter: unset; } ## 引入 JavaScript 重头戏来了：用浏览器原生的 IntersectionObserver API 检测元素何时进入视口（与 root 产生“交叉”），一旦进入就给元素加上 active 类，从而触发 transition 动画。 相比这些重量级方案，IntersectionObserver 极其轻量： - GSAP + ScrollTrigger

• jQuery 的 scroll() 方法

• 甚至 addEventListener('scroll', () => {})（每帧都触发，性能差） 直接把下面的 JS 原样复制到你的站点，放置规则同上： - 子主题加载，或 Bricks → Settings → Custom Code → Body (footer) scripts（记得用 <script></script> 标签包裹）——全站生效

• 第三方 Code Snippets 插件

• Code 元素里（用 <script></script> 包裹）——仅单页生效 ```javascript window.addEventListener(“load”, () => { // 定义变量 var iOSupported = “IntersectionObserver” in window; /* 浏览器是否支持 */ var box = document.querySelectorAll(‘.custom-animation-on-scroll’); // 检查浏览器是否支持 IntersectionObserver if (!iOSupported) { return; } // 配置项 const config = { root: null, // 以视口为基准元素 rootMargin: ‘0% 0% -25% 0%’, // 元素滚动到距视口底部 25% 位置时触发 threshold: 0 }; // 初始化观察器 let observer = new IntersectionObserver((entries) => { entries.forEach((item) => { if (item.isIntersecting) { // 元素进入视口时加上 active 类 item.target.classList.add(“active”); } else { // 元素离开视口时移除 active 类——想实现“离开后复位”就取消下面这行注释 // item.target.classList.remove(“active”); } }); }, config); // 观察所有带 custom-animation-on-scroll 类的元素 box.forEach((item) => { observer.observe(item); }); });

>



- [Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）](/blog/a-css-approach-to-content-switcher-in-bricks/)



- [Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表](/blog/acf-checkbox-svg-bullets/)



- [Bricks 按 ACF Gallery 图片数量做动态条件输出](/blog/acf-gallery-images-count-condition/)



## 结论 这里展示的只是冰山一角——想象一下：不用任何第三方插件、不引外部库、不用离开 Bricks 编辑页，就能给页面加任意类型的入场动画。是不是很酷？ 要注意两点：JS 里 `rootMargin: '0% 0% -25% 0%'` 控制触发时机（元素进入视口底部 25% 区域时触发），想让动画更早/更晚触发就改这个值；另外触发类 `custom-animation-on-scroll` 和动画类要加在**同一个元素**上，JS 靠它找到所有目标元素。

## 常见误区与无障碍提示

两个坑：一是动画触发太频繁或太花，用户滚动时内容乱跳反而烦躁；二是没尊重系统的「减少动态效果」偏好（prefers-reduced-motion），对晕动症用户不友好。性能上，用 IntersectionObserver 比 scroll 事件省电，但元素多时仍要给动画加节流、别在动画里改会触发重排的属性（如 width/top），改用 transform/opacity。正文级别的页面动画要克制，别抢阅读。

## 延伸阅读

- 想要现成外贸独立站，从零搭出能收询盘的站？看 [铲子铺 chanzipu 的外贸建站教程](https://chanzipu.com/)（同用 Bricks）

## 常见问题（FAQ）

**一定要用 JS 才能做滚动动画吗？** 不一定，纯 CSS 也能做入场动画，但「进入视口才触发」用 IntersectionObserver 最省心。

**动画影响 LCP 吗？** 别把动画加在首屏最大内容元素上就不会明显影响；动画元素尽量用 transform/opacity。

**怎么照顾晕动症用户？** 在 CSS 里加 `@media (prefers-reduced-motion: reduce)` 关闭或减弱动画。

**observer 触发时机怎么调？** 改 `rootMargin` 值，比如 `-25%` 就是元素进入视口底部 25% 区域时触发。
- 相关阅读：[Bricks Setup Guide](/blog/bricks-setup-guide/)

站长

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.

获取报价 →浏览全部教程