前端动画 on 办公AI智能小助手

使用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参数实现错开动画时序
结合缩放、模糊和位移创造电影级滚动体验

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

从空白到混沌：Eloy Benoffi基于Webflow和GSAP打造的粗野主义故障风作品集

Wed, 05 Nov 2025 22:08:19 +0800

从空白到混沌：Eloy Benoffi基于Webflow和GSAP打造的粗野主义故障风作品集

创作理念

作为一个实验性UI设计师和Webflow开发者，Eloy Benoffi希望通过自己的作品集网站传达三个核心理念：

从HTML5视频到帧序列：OPTIKKA平滑滚动同步动画实现指南

Sun, 26 Oct 2025 12:11:01 +0800

创建OPTIKKA的平滑滚动同步动画：从HTML5视频到帧序列

初始方案：HTML5视频

为何看似可行

我们最初的想法是使用HTML5视频进行滚动触发动画，配合GSAP的ScrollTrigger插件进行滚动跟踪。这种方法有明显优势：

// 使用视频元素的初始方法
export default class VideoScene extends Section {
  private video: HTMLVideoElement;
  private scrollTrigger: ScrollTrigger;
  
  setupVideoScroll() {
    this.scrollTrigger = ScrollTrigger.create({
      trigger: '.video-container',
      start: 'top top',
      end: 'bottom bottom',
      scrub: true,
      onUpdate: (self) => {
        // 将视频时间与滚动进度同步
        const duration = this.video.duration;
        this.video.currentTime = self.progress * duration;
      },
    });
  }
}

优势：

从空白到混乱：Eloy Benoffi使用Webflow和GSAP打造的粗野主义故障风作品集

Wed, 22 Oct 2025 00:36:39 +0800

从空白到混乱：Eloy Benoffi使用Webflow和GSAP打造的粗野主义故障风作品集

设计理念的形成

作品集的设计过程经历了16次Figma迭代，最终确立了三个核心理念：

极繁主义：更多即是更多，不因追求清晰度而缩减功能或细节
粗野主义：元素大胆、粗糙、直接，形状锐利，故障效果明显
趣味性：个人项目应保持乐趣，不受他人预期约束

技术栈选择

Webflow作为基础

作为Webflow认证合作伙伴，作者选择Webflow构建网站基础，因其能够：

从空白到混沌：Eloy Benoffi基于Webflow和GSAP构建的粗野主义故障风作品集

Tue, 21 Oct 2025 13:18:10 +0800

从空白到混沌：Eloy Benoffi基于Webflow和GSAP构建的粗野主义故障风作品集

创作理念

作为一个实验性UI设计师和Webflow开发者，Eloy Benoffi希望通过新作品集传达三个核心理念：

从HTML5视频到帧序列：OPTIKKA流畅滚动动画技术解析

Tue, 21 Oct 2025 13:14:44 +0800

创建流畅的滚动同步动画：从HTML5视频到帧序列

初始方案：HTML5视频

为何选择视频方案

我们最初考虑使用HTML5视频配合GSAP的ScrollTrigger插件实现滚动触发动画：

export default class VideoScene extends Section {
  private video: HTMLVideoElement;
  private scrollTrigger: ScrollTrigger;
  
  setupVideoScroll() {
    this.scrollTrigger = ScrollTrigger.create({
      trigger: '.video-container',
      start: 'top top',
      end: 'bottom bottom',
      scrub: true,
      onUpdate: (self) => {
        const duration = this.video.duration;
        this.video.currentTime = self.progress * duration;
      },
    });
  }
}

优势：

从HTML5视频到帧序列：OPTIKKA平滑滚动动画实现指南

Mon, 20 Oct 2025 19:58:29 +0800

创建OPTIKKA的平滑滚动同步动画：从HTML5视频到帧序列

了解Zajno如何为OPTIKKA构建平滑的滚动同步动画，使用帧序列替代HTML5视频以获得更好的控制和性能。

初始方法：HTML5视频

为何看似有前景

我们最初的想法是使用HTML5视频进行滚动触发动画，配合GSAP的ScrollTrigger插件进行滚动跟踪。这种方法有明显优势：

动态网站设计实战：OGL与GSAP打造沉浸式交互体验

Wed, 01 Oct 2025 21:12:48 +0800

LO2S × SNP & DashDigital：设计充满动感与能量的网站

SNP和DashDigital团队分享了他们如何通过动效、交互性和性能优化将LO2S网站打造成生动体验。