使用 GSAP 创建水平滚动部分

Question

我正在尝试实现一个 section，当在视图中时，它变成水平滚动条，直到滚动条中的项目（在我的例子中是图像）完成，此时，它变成再次垂直滚动条。

我已经在以下演示中看到并调整了我的方法：

我想要达到的美感是默认显示两张图片，然后滚动查看其余图片。请参阅下面的模型：

这是我目前的做法：

$(function() {

  let scroll_tl = gsap.timeline({
    scrollTrigger: {
      trigger: '.horizontalScroller__images',
      start: "top center",
      // pin: true,
      scrub: true,
      end: "+=300",
      // markers: true,
    }
  });

  var images = document.querySelectorAll('.horizontalScroller__item');

  scroll_tl.to('.horizontalScroller__intro', {
    duration: 1,
    ease: "slow"
  });

  scroll_tl.to(images, {
    xPercent: -85 * (images.length - 1),
    scrollTrigger: {
      trigger: ".horizontalScroller__images",
      start: "center center",
      pin: true,
      // horizontal: true,
      // pinSpacing:false,
      markers: true,
      scrub: 1,
      snap: 1 / (images.length - 1),
      // end: () => `+=4320`
    }
  });

});

.spacer{
  height: 300vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 114px 0 80px 0;
  height: 100vh;
  position: relative;
  background-color: #5d209f;
}
.horizontalScroller__intro {
  margin-bottom: 25px;
  color: #FFFFFF;
}
.horizontalScroller__header {
  margin-bottom: 17px;
}
.horizontalScroller__images {
  display: flex;
  justify-content: center;
  align-items: center;
}
.horizontalScroller__scroll {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}
/* .horizontalScroller__item {
  width: 25vw;
} */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="spacer"> Scroll down </div>

<section class="horizontalScroller">

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-xl-6">
        <div class="horizontalScroller__intro">
          <h2 class="horizontalScroller__header">This is the header</h2>
          <p class="horizontalScroller__standfirst mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">

    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
    </div>

  </div>

</section>

在我上面的演示中，您可以看到当在该部分滚动时，图像向下移动（不是故意的）然后它们开始向左移动（而水平滚动应该向右移动）。

此外，为了最初显示两张卡片，我尝试将 width 设置为 .horizontalScroller__item，但它只会把事情搞得更糟。

不确定为什么我的代码会这样执行，有什么想法吗？

Answer 1

您需要使用最顶层的父容器 horizontalScroller，即跨越整个视口高度作为 scrollTrigger：

$(function() {
  let images = gsap.utils.toArray(".horizontalScroller__item");

  gsap.to(images, {
    xPercent: -100 * (images.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: true,
      scrub: 1,
      snap: 1 / (images.length - 1),
      end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
    }
  });

});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.spacer {
  height: 300vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 2rem 0 1rem 0;
  height: 100vh;
  position: relative;
  background-color: #5d209f;
}

.horizontalScroller__intro {
  margin-bottom: 1.5rem;
  color: #FFFFFF;
}

.horizontalScroller__header {
  margin-bottom: 1rem;
}

.horizontalScroller__scroll {
  height: 70%;
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.horizontalScroller__images {
  height: 100%;
  display: flex;
  align-items: center;
}

.horizontalScroller__item {
  width: 50vw;
  height: 100%;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}

.horizontalScroller__image {
  width: 70%;
  object-fit: fill;
  margin: 0 auto;
}

.footer {
  height: 80vh;
  width: 100%;
  background-color: yellow;
  font-size: 3rem;
}

.copyrights {
  height: 20vh;
  width: 100%;
  background-color: lightsalmon;
  font-size: 3rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="spacer"> Scroll down </div>

<section class="horizontalScroller">

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-xl-6">
        <div class="horizontalScroller__intro">
          <h2 class="horizontalScroller__header">This is the header</h2>
          <p class="horizontalScroller__standfirst mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">

    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
    </div>
  </div>
</section>
<div class="footer">Footer</div>
<div class="copyrights">Copyrights</div>

使用 GSAP 创建水平滚动部分

Using GSAP to create horizontal scroll section

javascript

jquery

css

gsap

scrolltrigger