如何在Next.js中实现滚动时的Z轴滚动（爆炸效果）？

• 给每张图片设置独立的3D变换参数
  目前所有图片移动到同一位置，核心原因是变换参数完全一致。你可以基于图片的索引（index）计算差异化的偏移、旋转值，让每张图的运动轨迹分散开：

  // 示例：基于索引生成差异化变换规则
  const calculateTransform = (index, scrollProgress) => {
    // 根据索引分配横向/纵向分散偏移
    const xOffset = (index % 4) * 60 - 90;
    const yOffset = Math.floor(index / 4) * 50 - 100;
    // 随机旋转角度增强爆炸感
    const rotateZ = (index * 15) % 360;
    // 结合滚动进度计算最终变换值
    const scrollFactor = scrollProgress * 1.2;
    return `translate3d(${xOffset * scrollFactor}px, ${yOffset * scrollFactor}px, 0) rotateZ(${rotateZ * scrollFactor}deg)`;
  };
  

  在渲染图片列表时，给每张图传入对应的index，调用这个函数生成唯一的transform样式。

• 调整透视与变换原点
  300px的透视值过小，会让所有元素的透视汇聚点过于集中，建议将容器的perspective调整到800-1200px，让分散效果更自然。同时给每张图片设置不同的transform-origin，让旋转/位移的中心点差异化：

  .image-container {
    perspective: 1000px; /* 调整透视值 */
  }
  .image-item {
    transform-origin: var(--transform-origin);
  }
  

  在JS中给每个图片元素动态设置--transform-origin变量，比如：

  // 随机生成变换原点
  const getRandomOrigin = () => {
    const positions = ['top left', 'top center', 'top right', 'center left', 'center', 'center right', 'bottom left', 'bottom center', 'bottom right'];
    return positions[Math.floor(Math.random() * positions.length)];
  };
  

• 使用非线性滚动变换逻辑
  放弃线性的滚动映射，改用非线性函数让图片的移动速度随滚动进度变化，增强爆炸的冲击力。比如用幂函数或三角函数调整滚动因子：

  // 基于滚动进度的非线性计算
  const scrollProgress = window.scrollY / document.body.scrollHeight;
  const nonLinearFactor = Math.pow(scrollProgress, 1.5); // 滚动后期变换幅度更大
  

  当滚动到特定阈值（比如页面滚动过半）时，可以进一步放大变换系数，模拟爆炸的瞬间爆发感。

• 确保变换逻辑的独立性
  检查你的滚动事件处理代码，保证每张图片的变换计算是独立的，避免所有元素共享同一套计算结果。在Next.js中渲染列表时，利用map的index参数为每个图片生成唯一的变换规则。

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