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

1
2
3
4
5
6
7

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.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;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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"
  }
})

1
2
3
4
5

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.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;
}

1
2
3
4

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

1
2
3
4
5
6
7

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

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

1
2
3
4

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.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);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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)