如何在 WordPress 实现 WooCommerce 产品滚动交错加载动画？

你是否发现有些高端电商网站的产品不是生硬地出现，而是随着鼠标下滑，像多米诺骨牌一样从左到右、依次滑入？

这种效果叫“交错滚动动画”。今天我教大家如何只用 WPCode（免费版即可）几行代码，就能让你的商城瞬间提升高级感！

准备工作

为了保持网站简洁，我们不建议为每一个小功能都安装厚重的插件。WPCode 是一个“万能代码盒子”，可以让你安全地添加代码。

登录 WordPress 后台，点击左侧菜单的 插件 (Plugins) -> 安装插件 (Add New)。
在搜索框输入 WPCode。
找到那个有“蓝色大括号”图标的插件（原名 Insert Headers and Footers），点击立即安装，然后点击启用。
启用后，你的后台左侧菜单会出现一个 Code Snippets 选项。

🛠️ 操作步骤

第一步：准备样式-添加 CSS

我们要定义产品还没出现时的样子。

进入 WordPress 后台，点击 WPCode -> + Add Snippet。
选择 Add Your Custom Code (New Snippet)。
标题填：产品入场动画-CSS。（可以自己定义）
Code Type 选择 CSS Snippet。
粘贴以下代码：

CSS

/* 1. 初始状态：透明且向下偏移 30 像素 */
.products .product {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out; /* 动画持续 0.6 秒 */
}

/* 2. 激活状态：当加上 .is-visible 这个类时，回到原位并显示 */
.products .product.is-visible {
    opacity: 1;
    transform: translateY(0);
}

确保下方的 Insertion (插入位置) 是 Site Wide Header。
将右上角的开关从 Inactive 拨到 Active，点击 Save Snippet。

第二步：显示逻辑 -添加 JavaScript

这是最关键的一步，它负责检测滚动并“发号施令”。

再次点击 Add Snippet -> Add Your Custom Code。
标题填：产品入场动画-JS。（可自定义）
Code Type 选择 JavaScript Snippet。
粘贴以下代码：

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    // 找到页面上所有的产品卡片
    const products = document.querySelectorAll('.products .product');
    
    // 配置检测器：当产品进入屏幕 10% 的时候触发
    const observerOptions = { threshold: 0.1 };

    const observer = new IntersectionObserver((entries) => {
        // 筛选出那些“刚刚进入视野”的产品
        const visibleEntries = entries.filter(entry => entry.isIntersecting);
        
        visibleEntries.forEach((entry, index) => {
            const product = entry.target;
            
            // 核心逻辑：给每个排队进入的产品设置延迟
            // 第一个延迟 0ms，第二个 100ms，第三个 200ms... 从而实现从左到右的效果
            setTimeout(() => {
                product.classList.add('is-visible');
            }, index * 100); 
            
            // 显示完后，停止观察，避免重复触发动画
            observer.unobserve(product);
        });
    }, observerOptions);

    // 启动检测
    products.forEach(product => observer.observe(product));
});

确保下方的 Insertion (插入位置) 是 Site Wide Footer（页脚）。
将右上角开关拨至 Active，点击 Save Snippet。

⚠️ 注意事项

类名匹配：本教程使用的是 WooCommerce 默认的类名 .products .product。如果你的主题比较特殊（比如用 Elementor 搭建的），动画没生效，请在浏览器里右键点击产品“检查”，看看你的产品容器类名是什么，并替换代码中的 .product。
动画速度：如果你觉得产品出来得太慢，可以把 index * 100 改成 index * 50。
保存并启用这两个 Snippet 后，清除你的浏览器缓存（或者用无痕模式）打开商城。慢慢向下滚动，你会发现产品不再是死板地在那等着，而是像呼吸一样顺滑地一个个跳出来！