如何实现img1类图片随页面滚动触发水平视差偏移效果

你之前写的是自动循环的上下位移动画，和页面滚动行为完全没有绑定，自然没法实现滚动触发的交互效果，按下面的步骤改即可。

首先先提一个规范问题：同一个页面里ID必须是唯一的，你给所有图片都设置相同的id="img1"不符合HTML规范，后续只保留class="img1"用来选中元素即可。

方案1：JS实现（兼容性最好，推荐） #

这个方案支持所有主流浏览器，滚动时动画流畅，参数可以灵活调整。

1. 先替换原有.img1的CSS样式，删除之前写的mover动画相关代码：

.img1 {
  /* 加过渡让位移更顺滑，可自行调整过渡时长 */
  transition: transform 0.12s linear;
  /* 告诉浏览器提前准备transform变化，优化渲染性能 */
  will-change: transform;
  position: relative;
}

2. 在页面script标签里加入下面的逻辑：

// 按需调整下面的配置参数即可
const parallaxConfig = {
  maxOffset: 120, // 图片最大水平偏移距离，单位px
  scrollDirection: 'right', // 向下滚动时图片的移动方向，可选值 left / right
  speed: 0.25 // 视差移动速度，数值越大图片跟随滚动移动越快
}

const imgList = document.querySelectorAll('.img1')
let lastScrollTop = window.scrollY

function updateParallaxPosition() {
  const currentScrollTop = window.scrollY
  const scrollGap = currentScrollTop - lastScrollTop

  imgList.forEach(img => {
    // 读取当前元素已有的水平偏移，避免覆盖其他transform效果
    const transformMatrix = getComputedStyle(img).transform
    let currentOffsetX = 0
    if (transformMatrix !== 'none') {
      const matrixVal = transformMatrix.match(/matrix.*\((.+)\)/)[1].split(', ')
      currentOffsetX = parseFloat(matrixVal[4])
    }

    // 计算本次滚动需要新增的偏移量
    let addOffset = scrollGap * parallaxConfig.speed
    if (parallaxConfig.scrollDirection === 'left') addOffset = -addOffset
    let newOffsetX = currentOffsetX + addOffset

    // 限制偏移范围，避免图片移出可视区域过远
    const minOffset = parallaxConfig.scrollDirection === 'right' ? 0 : -parallaxConfig.maxOffset
    const maxOffset = parallaxConfig.scrollDirection === 'right' ? parallaxConfig.maxOffset : 0
    newOffsetX = Math.max(minOffset, Math.min(newOffsetX, maxOffset))

    // 滚动回页面顶部时自动复位到初始位置
    if (currentScrollTop === 0) newOffsetX = 0

    img.style.transform = `translateX(${newOffsetX}px)`
  })

  lastScrollTop = currentScrollTop
}

// 滚动时用requestAnimationFrame优化，避免频繁触发导致卡顿
window.addEventListener('scroll', () => {
  window.requestAnimationFrame(updateParallaxPosition)
})
// 页面加载完成后先执行一次，避免初始位置错位
window.addEventListener('load', updateParallaxPosition)

参数调整说明 #

• 想要图片移动幅度更大，就调大maxOffset的数值
• 想要视差效果更明显，就适当调大speed的值，建议不超过0.5，否则移动会过于突兀
• 想要向下滚动时图片向左侧移动，把scrollDirection的值改为left即可
• 如果需要不同图片有不同的移动方向/速度，给对应图片加单独的class，分别初始化逻辑即可

方案2：纯CSS滚动驱动动画（实现简单，兼容性一般） #

如果不需要兼容太旧的浏览器，可以用原生CSS滚动驱动动画实现，不需要写JS，仅支持Chrome 115+、Safari 16.4+以上版本：

.img1 {
  /* 删除原有mover动画，替换为下面的滚动驱动动画 */
  animation: horizontalScrollMove linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0 1200px; /* 页面滚动1200px的距离内完成全部位移动画 */
}

@keyframes horizontalScrollMove {
  0% { transform: translateX(0); }
  /* 120px是最大偏移距离，改成负数就是向左移动 */
  100% { transform: translateX(120px); }
}

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