如何用GSAP ScrollTrigger实现滚动时图片覆盖标题效果

要实现横向滚动时图片覆盖左侧标题的效果，核心是让图片脱离容器的裁剪限制，并通过GSAP控制其位移覆盖标题区域。以下是具体修改方案：

1. 调整布局与CSS #

解决原容器裁剪图片的问题，同时设置层级让图片能覆盖标题：

.main{
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative; /* 让绝对定位的图片以整个布局为参照 */
  overflow: hidden; /* 避免页面整体横向溢出 */
  min-height: 500px;
}
.header-section {
  position: relative;
  z-index: 1; /* 初始状态标题在图片上方 */
  padding: 2rem;
  align-self: center;
}
.horizSlider {
  position: relative;
  white-space: nowrap;
  overflow: auto;
  height: 500px; /* 固定滚动容器高度 */
}
.horizSlider .slide {
  display: inline-block;
  position: relative;
  width: 1000px; /* 与图片尺寸匹配 */
  height: 500px;
}
.slideImage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: bottom left;
  z-index: 2; /* 图片层级高于标题，可覆盖 */
}
.slideText {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  color: white;
  z-index: 3; /* 确保文字在图片上方 */
}

2. 修改GSAP动画逻辑 #

调整滚动触发范围和图片位移，让图片能滚动到标题区域：

gsap.utils.toArray(".slide").forEach(slide => {
  const text = slide.querySelector(".slideText");
  const image = slide.querySelector(".slideImage");
  
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      scroller: slide.closest(".horizSlider"),
      horizontal: true,
      trigger: slide,
      start: "left right",
      end: "left -50%", /* 延长滚动触发范围，让图片能覆盖标题 */
      scrub: true
    }
  })
  .fromTo(text, {x: 250}, {x: -250}, 0)
  .fromTo(image, {x: 0, scale: 0.8}, {x: -500, scale: 1}, 0); /* 图片向左移动500px，覆盖左侧标题区域 */
});

3. 完善HTML结构 #

补充缺失的slideText元素，并添加示例图片：

<section class="main">
<h1 class="header-section">Scroll the slider to the right to see some parallax effects</h1>

<section class="horizSlider">
  <div class="slide">
    <h2 class="slideText">Project 1</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500" alt="Filler image">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Project 2</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?2" alt="Filler image">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Project 3</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?3">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Project 4</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?4">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Project 5</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?5">
  </div>
</section>
</section>

关键说明 #

• 移除了.horizSlider的裁剪限制，通过position: absolute让图片脱离容器束缚
• 利用z-index控制标题、图片、文字的层级关系
• 调整GSAP的滚动触发终点和图片位移量，确保滚动时图片能覆盖左侧标题区域

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