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

本教程提供一套 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> 包裹）——仅单页生效

[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：

[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 那节的说明）：

[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> 包裹）——仅单页生效

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 编辑页，就能给页面加任意类型的入场动画。是不是很酷？

要注意两点：JS 里 rootMargin: '0% 0% -25% 0%' 控制触发时机（元素进入视口底部 25% 区域时触发），想让动画更早/更晚触发就改这个值；另外触发类 custom-animation-on-scroll 和动画类要加在同一个元素上，JS 靠它找到所有目标元素。