创建高级视差滚动效果：网站滚动动画实现方法咨询

你提到的两个网站的滚动动画，核心逻辑是把页面滚动进度和动画播放进度绑定——用户滚动页面时，动画跟着“同步播放”。你想到的图片序列+SVG背景是完全可行的方向，下面给你一步步拆解具体实现方法：

一、先搞定素材 #

1. 图片序列/视频 #

如果是产品旋转、场景过渡这类具象动画：

• 用3D软件（比如Blender）渲染或者相机拍摄，导出连续的图片帧（建议30帧/秒，总帧数根据你想要的滚动长度定，比如滚动1000px对应60帧就够），转成WebP格式压缩体积；
• 要是图片序列体积太大，直接导出带透明通道的MP4/WebM视频更省资源，后续用滚动控制视频播放进度就行。

2. SVG动效 #

如果是线条动画、图形变形这类矢量动效：

• 把SVG里需要动的元素拆成独立图层（比如路径、形状），提前定义好初始状态和目标状态（比如线条从0到100%描边，图形从缩放0到1）。

二、滚动进度计算 #

用JS监听滚动，把滚动距离转换成0-1之间的进度值，这是核心关联逻辑：

const animContainer = document.querySelector('.animation-wrap');
const containerTop = animContainer.offsetTop;
const containerHeight = animContainer.offsetHeight;
const windowHeight = window.innerHeight;

// 用requestAnimationFrame做节流，避免频繁计算
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      const scrollY = window.scrollY;
      // 计算容器进入视口后，滚动距离占容器总可见高度的比例
      const progress = Math.max(0, Math.min(1, (scrollY - (containerTop - windowHeight)) / (containerHeight + windowHeight)));
      updateAnim(progress);
      ticking = false;
    });
    ticking = true;
  }
});

三、把进度绑定到动画 #

1. 图片序列方案 #

先预加载所有图片，然后根据进度切换显示的帧：

// 预加载图片数组（示例：60帧）
const frames = Array.from({length: 60}, (_, i) => `./frames/frame-${i+1}.webp`);
// 提前加载所有图片，避免滚动时卡顿
frames.forEach(src => {
  const img = new Image();
  img.src = src;
});

function updateAnim(progress) {
  const frameIndex = Math.floor(progress * (frames.length - 1));
  animContainer.style.backgroundImage = `url(${frames[frameIndex]})`;
}

2. SVG动效方案 #

用CSS变量或者动画库，把进度映射到SVG元素的属性：

/* 示例：用CSS变量控制旋转角度 */
.watch-svg .rotating-part {
  transform: rotate(var(--rotate-progress, 0)turn);
  will-change: transform;
}

function updateAnim(progress) {
  document.documentElement.style.setProperty('--rotate-progress', progress);
}

要是用GSAP的ScrollTrigger插件，能更省心地绑定滚动和动画，不用自己写进度计算。

3. 视频方案 #

把进度转换成视频的播放时间，注意视频要设为静音（浏览器限制自动播放带声音的视频）：

<video class="anim-video" muted loop playsinline preload="auto" src="./anim.mp4"></video>

const animVideo = document.querySelector('.anim-video');
function updateAnim(progress) {
  animVideo.currentTime = progress * animVideo.duration;
}

四、必做的性能优化 #

• 预加载：用<link rel="preload" href="./frames/frame-1.webp" as="image">提前加载核心素材；
• 硬件加速：给动画容器加will-change: background-image, transform，让浏览器用GPU处理动画；
• 懒加载：用IntersectionObserver监听容器，不在视口内时暂停滚动监听，减少资源消耗。

工具推荐 #

• 素材制作：Blender（3D帧序列）、After Effects（导出透明视频/SVG动效）；
• 代码工具：GSAP + ScrollTrigger（简化滚动动画逻辑）、ScrollMagic；
• 压缩工具：Squoosh（图片压缩）、FFmpeg（视频压缩）。

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