实现页面向下滚动时图片上移动画的技术方案咨询

先明确你提到的参考效果本质：

• 不是固定5px的一次性动画，而是基于滚动进度的视差位移（滚动越多，图片向上移动幅度越大，幅度被控制在很小范围，所以呈现“小幅”效果）
• 同时叠加了滚动到可视区域后的淡入效果（属于滚动触发的入场逻辑，是懒加载的进阶应用，但核心效果是视差位移）

核心实现思路 #

1. 监听页面滚动事件，计算图片元素相对于视口的位置
2. 根据滚动进度计算图片的Y轴位移量（通过系数控制幅度，保证移动幅度平缓）
3. 判断图片进入视口后，同步触发淡入过渡效果

代码实现 #

HTML结构 #

<div class="container">
  <div class="image-wrapper">
    <img src="https://picsum.photos/800/600" alt="Sample Image" class="parallax-image">
  </div>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <div class="image-wrapper">
    <img src="https://picsum.photos/800/600?random=1" alt="Sample Image" class="parallax-image">
  </div>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
  <p>大量占位文本，用于测试滚动效果...</p>
</div>

CSS样式 #

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.image-wrapper {
  height: 400px;
  overflow: hidden;
  margin: 4rem 0;
}

.parallax-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 初始状态：透明+向下偏移 */
  opacity: 0;
  transform: translateY(10px);
  /* 过渡动画保证平滑 */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 进入视口后的激活状态 */
.parallax-image.active {
  opacity: 1;
  transform: translateY(0);
}

JavaScript逻辑 #

const parallaxImages = document.querySelectorAll('.parallax-image');

function handleScroll() {
  parallaxImages.forEach(img => {
    const rect = img.getBoundingClientRect();
    // 判断图片是否进入视口范围
    const isInView = rect.top < window.innerHeight && rect.bottom > 0;
    
    if (isInView) {
      img.classList.add('active');
      // 计算视差位移：滚动距离*系数，系数越小移动幅度越平缓
      const scrollY = window.scrollY;
      const basePosition = rect.top + scrollY - window.innerHeight;
      const translateY = -(scrollY - basePosition) * 0.05;
      // 限制最大位移，避免移动过度
      const clampedY = Math.max(-20, Math.min(0, translateY));
      img.style.transform = `translateY(${clampedY}px)`;
    } else {
      // 离开视口后恢复初始状态（可根据需求取消此逻辑）
      img.classList.remove('active');
    }
  });
}

// 初始化时检查一次，处理已在视口的图片
handleScroll();
window.addEventListener('scroll', handleScroll);

关键说明 #

• 视差幅度通过0.05这个系数控制，你可以调整该值改变图片移动幅度，数值越小移动越平缓
• 淡入效果与位移同步触发，通过CSS过渡实现平滑过渡
• 该效果核心是滚动驱动的动态位移，淡入只是伴随的入场效果，和单纯的懒加载逻辑有区别

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