使用GSAP实现分层缩放滚动效果的技术解析

Wed, 26 Nov 2025 13:02:08 +0800

使用GSAP构建分层缩放滚动效果

浮动图片网格

HTML结构

<div class="section">
  <div class="section__images">
    <img src="./img-1.webp" alt="Image" />
    <img src="./img-2.webp" alt="Image" />
    <!-- 更多图片 -->
  </div>
</div>

CSS样式

.section__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  perspective: 100vh;
}

.section__images img {
  position: absolute;
  width: 10vw;
}

@media (max-width: 768px) {
  .section__images img {
    width: 20vw;
  }
}

JavaScript动画

const scroller = ScrollSmoother.create({
  wrapper: ".wrapper",
  content: ".content",
  smooth: 1.5,
  effects: true,
  normalizeScroll: true
})

this.timeline = gsap.timeline({
  scrollTrigger: {
    trigger: this.dom,
    start: "top top",
    end: "bottom top",
    scrub: true,
    pin: true
  }
})

this.timeline.to(this.smallImages, {
  z: "100vh",
  duration: 1,
  ease: "power1.inOut",
  stagger: {
    amount: 0.2,
    from: "center"
  }
})

主视觉和分割文本

主图片设置

<div class="section__media">
  <div class="section__media__back">
    <img src="./img-big.jpg" alt="Image" />
  </div>
</div>

CSS变量控制缩放

.section__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: scale(var(--progress));
}

.section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

文本分割动画

<h1>
  <span class="left">for the</span>
  <span class="right">planet</span>
</h1>

.left {
  transform: translate3d(calc(var(--progress) * (-66vw + 100%) - 0.5vw), 0, 0);
}

.right {
  transform: translate3d(calc(var(--progress) * (66vw - 100%)), 0, 0);
}

分层缩放和深度效果

分层图片结构

<div class="section__media__front front-1">
  <img src="./img-big.jpg" alt="Image" />
</div>
<!-- 更多分层图片 -->

遮罩和缩放效果

.section__media__front img {
  mask-image: url(./mask.png);
  mask-position: 50% 50%;
  mask-size: cover;
}

.front-1 { transform: scale(1); }
.front-2 { transform: scale(0.85); }
.front-3 { transform: scale(0.6); }
.front-4 { transform: scale(0.45); }
.front-5 { transform: scale(0.3); }
.front-6 { transform: scale(0.15); }

.section__media__front {
  filter: blur(2px);
}

分层动画代码

this.timeline.to(this.frontImages, {
  scale: 1,
  duration: 1,
  ease: "power1.inOut",
  delay: .1,
}, 0.4)

this.timeline.to(this.frontImages, {
  duration: 1,
  filter: "blur(0px)",
  ease: "power1.inOut",
  delay: .4,
  stagger: {
    amount: 0.2,
    from: "end"
  }
}, 0.6)

技术要点总结

使用GSAP的ScrollSmoother插件实现平滑滚动效果
通过ScrollTrigger插件控制动画触发时机
利用CSS变量--progress同步多个动画元素
使用perspective属性创建3D深度效果
通过mask-image实现图像遮罩效果
使用stagger参数实现错开动画时序
结合缩放、模糊和位移创造电影级滚动体验

这种技术组合能够创建出具有深度感和电影质感的滚动交互效果，适合用于产品展示、作品集网站等需要突出视觉冲击力的场景。

滚动效果 on 办公AI智能小助手

使用GSAP实现分层缩放滚动效果的技术解析

使用GSAP构建分层缩放滚动效果

浮动图片网格

HTML结构

CSS样式

JavaScript动画

主视觉和分割文本

主图片设置

CSS变量控制缩放

文本分割动画

分层缩放和深度效果

分层图片结构

遮罩和缩放效果

分层动画代码

技术要点总结