Elementor中CSS打字效果加载即触发，如何实现进入视口时才运行？

1. 调整原有CSS代码 #

将你当前使用的CSS替换为下方版本，核心改动是将动画触发逻辑绑定到新增的.active类上，初始状态不加载动画，同时修复原有代码中关键帧无单位的bug：

.css-typing p {
    color: #5D5D5D; 
    font-size: 95px;
    margin: 10px 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    /* 初始宽度设为0，不绑定动画 */
    width: 0;
}
/* 仅当父容器加上active类后才触发动画 */
.css-typing.active p:nth-child(1) {
    animation: type 4s steps(60, end) forwards; 
}
.css-typing.active p:nth-child(2){
    animation: type2 4s steps(60, end) forwards;
}
.css-typing.active p:nth-child(3){
    animation: type3 6s steps(60, end) forwards;
}
.css-typing.active p:nth-child(4){
    animation: type3 8s steps(60, end) forwards;
}
.css-typing.active p:nth-child(5){
    animation: type3 10s steps(60, end) forwards;
}

@keyframes type{ 
    from { width: 0; } 
    to { width: 30em; }
} 

@keyframes type2{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 30em; } 
} 

@keyframes type3{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 30em; } 
} 

@keyframes type4{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 30em; } 
} 

@keyframes type5{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 30em; } 
}

注：forwards参数是让动画结束后保持最后一帧状态，避免动画结束后文字消失；可根据需求调整threshold参数，比如设置为1就是元素完全进入视口后才触发动画

2. 添加视口监听JS代码 #

使用Intersection Observer API检测打字模块进入视口的时机，触发时添加.active类启动动画：

document.addEventListener('DOMContentLoaded', function() {
    const typingElement = document.querySelector('.css-typing');
    if (!typingElement) return;

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            // 元素进入视口时添加激活类
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
                // 只触发一次动画，触发后取消监听
                observer.unobserve(entry.target);
            }
        });
    }, {
        // 阈值设置为0.1，即元素10%进入视口时触发，可根据需求调整
        threshold: 0.1
    });

    observer.observe(typingElement);
});

3. Elementor中部署操作 #

• 修改后的CSS依然可以放在你之前使用的文本编辑器自定义CSS面板，或者页面级的自定义CSS面板中
• JS代码可以用两种方式添加：
  • 直接在打字模块下方添加一个「HTML」小部件，把JS代码用<script>标签包裹后粘贴进去
  • 打开Elementor页面设置面板，找到「自定义代码」选项，把JS代码用<script>标签包裹后添加到页面底部位置

内容的提问来源于stack exchange，提问作者syed ahzam