如何将Spline动画设为WordPress背景并实现滚动联动效果？

1. 导出Spline动画嵌入代码 #

• 打开你的Spline项目，点击右上角「Export」→选择「Embed」，复制JS嵌入代码（推荐用spline-viewer标签的方式，比iframe更灵活）

2. 在Themify Builder中添加背景容器 #

• 新建一个全屏宽度的独立行容器，在容器的自定义CSS中设置：

.spline-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

• 在这个容器中添加Themify的「HTML模块」，粘贴你复制的Spline嵌入代码，调整动画容器样式：

<spline-viewer url="你的Spline项目URL" style="width:100%;height:100%;border:none;"></spline-viewer>

3. 实现滚动联动逻辑 #

• 在WordPress后台「外观→自定义→额外JavaScript」或者Themify Builder的自定义JS模块中添加以下代码：

// 获取Spline动画实例
const splineViewer = document.querySelector('spline-viewer');

// 监听滚动事件并同步动画进度
window.addEventListener('scroll', () => {
  // 计算滚动进度（0到1，代表页面从顶部到底部的滚动比例）
  const scrollRatio = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  
  // 同步动画进度（需确保Spline项目已设置完整时间轴动画）
  if (splineViewer) {
    splineViewer.currentTime = scrollRatio * splineViewer.duration;
  }
});

• 如果你用的是iframe方式，需要改用postMessage通信（记得在Spline项目的Embed设置中开启「Allow Post Messages」）：

const splineIframe = document.querySelector('iframe[src*="spline.design"]');

window.addEventListener('scroll', () => {
  const scrollRatio = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  splineIframe?.contentWindow.postMessage({ type: 'seek', value: scrollRatio * 100 }, '*');
});

4. 优化与调试 #

• 添加节流函数优化滚动事件性能，避免频繁触发：

function throttle(func, delay = 16) {
  let lastRun = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastRun >= delay) {
      lastRun = now;
      func(...args);
    }
  };
}

// 替换之前的滚动监听
window.addEventListener('scroll', throttle(() => {
  const scrollRatio = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  splineViewer.currentTime = scrollRatio * splineViewer.duration;
}));

• 测试不同设备的显示效果，调整页面内容的z-index确保内容在背景上方，避免被遮挡

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