纵向滚动效果：如何使用GSAP的ScrollTrigger实现?

javascript

2024-03-04 23:23:32

如何使用GSAP中的ScrollTrigger纵向遍历容器

在本文中，我们将深入探讨如何使用GSAP中的ScrollTrigger实现类似于Koalastudios.ca网站的纵向滚动效果，其中图像在滚动时移动到标题上方。我们将分步指导你解决问题，并提供优化代码和提高性能的建议。

纵向滚动效果

实现纵向滚动效果需要三步：

在容器上应用纵向ScrollTrigger
在图像容器上应用负margin
在文本上应用负margin

优化CSS

为了提高跨浏览器兼容性和简化代码，我们可以优化CSS：

使用flexbox或grid布局代替定位
添加一个class来选择图像容器
删除不必要的样式

优化JavaScript

我们可以简化时间线、使用onUpdate函数以及合并选择器来优化JavaScript：

使用缩短语法简化时间线
使用onUpdate函数更新所有动画
在单个选择器中选择图像容器和文本

代码示例

以下是最新的代码示例：

CSS

.main{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.horizSlider {
  position: relative;
  overflow-x: auto;
}

.horizSlider .slide {
  display: flex;
  align-items: center;
}

.slideImageContainer {
  margin-left: -100px;
  overflow: hidden;
}

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

.slideText {
  margin-left: -100px;
  color: white;
  font-size: 24px;
}

JavaScript

gsap.utils.toArray(".slideText").forEach(text => {
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      scroller: text.closest(".horizSlider"),
      horizontal: true,
      trigger: text.closest(".slide"),
      start: "left right",
      end: "left left",
      scrub: true,
      onUpdate: progress => {
        const containerPosition = progress.target.scroll.left;
        text.style.marginLeft = `${containerPosition}px`;
        text.nextElementSibling.style.marginLeft = `${containerPosition}px`;
      }
    }
  });
});