WordPress Avada主题：向上滚动时重新播放CSS动画

嘿，这个需求其实挺常见的，我来给你捋捋具体怎么实现——核心思路就是监听页面的向上滚动事件，当元素满足触发条件时重置动画状态。下面是适配Avada场景的完整步骤：

1. 给目标元素添加专属类名 #

首先，给所有需要重新播放动画的Avada页面元素（比如模块、文本框、图片等）加一个自定义类名，比如replay-on-scroll-up。操作路径是：打开元素编辑面板→找到「Advanced（高级）」选项卡→在「CSS Class」输入框填入这个类名。

2. 编写滚动监听的JavaScript代码 #

接下来要写一段JS来监听滚动方向，触发动画重置。你可以把这段代码加到Avada的「Theme Options」→「Custom Code」→「Custom JavaScript」里，或者用Code Snippets这类插件添加到页面：

// 记录上一次滚动的位置
let lastScrollTop = 0;

window.addEventListener('scroll', function() {
    // 获取当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 判断是否为向上滚动
    if (scrollTop < lastScrollTop) {
        // 筛选出所有需要重启动画的元素
        const animatedElements = document.querySelectorAll('.replay-on-scroll-up');
        
        animatedElements.forEach(el => {
            // 替换成你实际使用的动画类名（Avada自带动画类一般是fusion-animation-xxx格式）
            const targetAnimationClass = el.classList.contains('fusion-animation-fade-in') 
                ? 'fusion-animation-fade-in' 
                : 'your-custom-animation-class';
            
            // 先移除动画类，触发浏览器重绘后再重新添加，实现动画重启
            el.classList.remove(targetAnimationClass);
            void el.offsetWidth; // 强制浏览器重绘
            el.classList.add(targetAnimationClass);
            
            // 如果你的动画是直接写在元素style里的@keyframes，用下面的方式重置：
            // el.style.animation = 'none';
            // void el.offsetWidth;
            // el.style.animation = null;
        });
    }
    
    // 更新上一次滚动位置
    lastScrollTop = scrollTop;
});

小提示：如果用的是Avada自带的动画，可以通过浏览器开发者工具查看元素的类名，比如你选了「Fade In」动画，元素会带有fusion-animation-fade-in类。

3. 调整CSS动画属性（可选） #

如果你的动画默认设置了animation-fill-mode: forwards（保持动画结束后的状态），需要调整CSS让动画能被重复触发：

.replay-on-scroll-up {
    animation-fill-mode: none !important; /* 取消保持最终状态，允许动画重新播放 */
    animation-iteration-count: 1 !important; /* 确保每次触发只播放一次 */
}

把这段CSS加到Avada的「Theme Options」→「Custom Code」→「Custom CSS」即可。

4. 测试与排查 #

保存所有设置后刷新页面，向上滚动看看效果。如果没生效，可以检查这几点：

• 元素的自定义类名是否正确添加
• JS里的动画类名是否和实际使用的一致
• 有没有其他插件的JS代码冲突（可以暂时禁用其他插件排查）

内容的提问来源于stack exchange，提问作者Cemre Suler