如何实现类似publicofficial.co的滚动触发图片显示效果？移动端是否有差异？

你提到的这种滚动页面时图片逐步显示的效果，通常叫做滚动触发式图片入场动画，对应的搜索关键词可以用「scroll-triggered image reveal animation」「滚动驱动图片显隐动画」，直接搜这些就能找到相关实现资源。

简便实现方式 #

1. CSS原生方案（推荐移动端优先） #

现在主流移动端浏览器已经支持CSS滚动驱动动画，无需JS就能实现，性能更优：

/* 初始状态：透明+向下位移 */
.image-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 元素进入视口时触发动画 */
.image-reveal:is(:in-view) {
  opacity: 1;
  transform: translateY(0);
}

如果需要更精准的滚动进度控制（比如根据滚动距离逐步显示），可以用@scroll-timeline：

@scroll-timeline image-reveal-timeline {
  source: auto;
  orientation: vertical;
  /* 滚动从元素顶部进入视口开始，到元素底部进入视口一半时结束 */
  scroll-offsets: 0%, 100% 50%;
}

.image-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 0.6s ease forwards;
  animation-timeline: image-reveal-timeline;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2. 轻量JS方案（兼容老设备） #

如果需要兼容较老的移动端浏览器，用Intersection Observer API监听元素是否进入视口，触发动画：

// 配置监听参数：当元素进入视口10%时触发
const observerOptions = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('revealed');
      observer.unobserve(entry.target); // 只触发一次
    }
  });
}, observerOptions);

// 给所有目标图片添加监听
document.querySelectorAll('.image-reveal').forEach(img => {
  observer.observe(img);
});

对应的CSS：

.image-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.image-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

移动端实现的差异 #

• 滚动特性适配：移动端是触摸滚动，部分浏览器有滚动回弹效果，用CSS滚动驱动动画时，要调整scroll-offsets参数，避免动画误触发；用Intersection Observer时，可适当调整rootMargin扩大触发范围。
• 性能优先：移动端硬件性能有限，优先用CSS动画（transform和opacity是GPU加速属性，不会触发页面重排），减少JS监听的性能消耗。
• 视口适配：移动端视口较小，要调整触发阈值（比如Intersection Observer的threshold设为0.1，确保图片刚进入视口就开始动画），避免用户滚动很久才看到图片显示。
• 兼容性：老款移动端浏览器（比如iOS 15以下）不支持CSS滚动驱动动画，此时优先用Intersection Observer方案，它的兼容性覆盖绝大多数移动设备。

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