2

我正在使用 GSAP 产品滚动触发器。我正在做的是，一旦用户滚动，我必须在一个滚动中从下到上滚动下一部分。这将一直发生，直到第六部分出现在视口中。

一旦第六部分来了，我就必须水平滚动他的行。一旦完成所有行，然后从下到上重新开始铰孔部分。

我在这里分享下面的 codepen 链接。我的垂直问题得到了解决，但我在水平行上遇到了问题。我的意思是水平滚动不能与一个滚动一起使用，我有 5 行，但我正在四行。

您也可以在此处查看代码段

gsap.registerPlugin(ScrollTrigger);

function goToSection(i, anim) {
  gsap.to(window, {
    scrollTo: {
      y: i * innerHeight,
      autoKill: false
    },
    duration: 1
  });

  if (anim) {
    anim.restart();
  }
}

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: panel,
    start: "bottom bottom",
    onEnterBack: () => goToSection(i),
  });
});



let sections = gsap.utils.toArray(".rows");
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".pinme",
    pin: true,
    scrub: 1,
    // snap: 1 / (sections.length - 1),
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".pinme").offsetWidth
  }
});
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Signika Negative", sans-serif, Arial;
}

.blue {
  background-color: blue
}

.red {
  background-color: #f00;
}

.orange {
  background-color: orange;
}

.purple {
  background-color: purple
}

.green {
  background-color: green
}

.gray {
  background-color: gray
}

.panel {
  height: 100vh;
  position: sticky;
  top: 0;
}

h2 {
  font-size: 50px;
  color: #fff;
  padding: 0;
  margin: 0;
}

.rows {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.pinme {
  width: 700%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.sixth {
  width: 100% !important
}
<div class="description panel blue">
  <h2>Scroll Down</h2>
</div>

<section class="panel red">
  <h2>ONE</h2>
</section>
<section class="panel orange">
  <h2>TWO</h2>
</section>
<section class="panel purple">
  <h2>THREE</h2>
</section>
<section class="panel green">
  <h2>FOUR</h2>
</section>

<section class="panel red">
  <h2>five</h2>
</section>

<section class="panel purple pinme">
  <div class="sixth">
    <h2>Six</h2>
  </div>

  <div class="rows rows1">
    <h2>Rows One</h2>
  </div>
  <div class="rows rows2">
    <h2>Rows Two</h2>
  </div>
  <div class="rows rows3">
    <h2>Rows Three</h2>
  </div>
  <div class="rows rows4">
    <h2>Rows Four</h2>
  </div>
  <div class="rows rows5">
    <h2>Rows Five</h2>
  </div>

</section>

<section class="panel blue unpinme">
  <h2>seven</h2>
</section>

<section class="panel red">
  <h2>Eight</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

4

0 回答 0