Vanta.js Birds动画滚动时暂停的原因及修复方法咨询

问题原因 #

• Vanta.js 内置性能优化机制：当绑定动画的元素完全移出视口或页面失焦时，会自动暂停Three.js渲染，减少不必要的资源消耗。
• 你的#intro元素在页面滚动后离开视口范围，触发了这个默认暂停逻辑。

修复方案 #

1. 禁用滚动暂停配置 #

在初始化动画时添加pauseOnScroll: false参数，强制关闭滚动时的自动暂停行为；搭配pauseOnBlur: false可避免页面失焦时暂停：

VANTA.BIRDS({
    el: "#intro",
    mouseControls: true,
    touchControls: true,
    gyroControls: true,
    minHeight: 1920.00,
    minWidth: 1080.00,
    scale: 1.00,
    scaleMobile: 1.00,
    color1: 0xde0707,
    color2: 0x7c0eb,
    birdSize: 0.60,
    separation: 14.00,
    alignment: 26.00,
    backgroundAlpha: 0,
    pauseOnBlur: false,
    pauseOnScroll: false
})

2. 固定动画元素位置 #

如果#intro作为页面背景使用，通过CSS将其固定在视口内，确保滚动时元素始终可见，不会触发暂停：

#intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* 避免遮挡页面其他内容 */
}

3. 手动控制动画启停 #

通过Vanta实例的API结合滚动事件，自定义判断元素是否在视口内，手动控制动画的暂停/恢复，兼顾性能与需求：

// 保存动画实例
const vantaBirds = VANTA.BIRDS({
    el: "#intro",
    mouseControls: true,
    touchControls: true,
    gyroControls: true,
    minHeight: 1920.00,
    minWidth: 1080.00,
    scale: 1.00,
    scaleMobile: 1.00,
    color1: 0xde0707,
    color2: 0x7c0eb,
    birdSize: 0.60,
    separation: 14.00,
    alignment: 26.00,
    backgroundAlpha: 0
})

// 监听页面滚动
window.addEventListener('scroll', () => {
    const introRect = document.getElementById('intro').getBoundingClientRect();
    // 判断元素是否有部分在视口内
    const isVisible = introRect.top < window.innerHeight && introRect.bottom > 0;
    
    if (isVisible) {
        vantaBirds.resume();
    } else {
        vantaBirds.pause(); // 完全不可见时暂停节省性能
    }
})

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