0

我只是想知道我是否可以在垂直滚动捕捉之间的某个地方获得水平平滑滚动捕捉？

到目前为止，这是我正在使用的 - https://codepen.io/tarunpatnayak/pen/rNYvvQb

我试图在垂直滚动之间包含这样的东西 - https://codepen.io/tarunpatnayak/pen/OJOQXwp

有人可以帮我实现这一目标吗？

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(ScrollToPlugin);

let sections = gsap.utils.toArray(".panel");

function goToSection(i) {
  gsap.to(window, {
    scrollTo: {
      y: i * innerHeight,
      autoKill: false,
      ease: "Power3.easeInOut"
    },
    duration: 0.85
  });
}

ScrollTrigger.defaults({
  // markers: true
});

sections.forEach((eachPanel, i) => {
  // const mainAnim = gsap.timeline({ paused: true });

  ScrollTrigger.create({
    trigger: eachPanel,
    onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: eachPanel,
    start: "bottom bottom",
    onEnterBack: () => goToSection(i)
  });
});
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel p {
  font-size: 6vw;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.orange {
  background: orange;
}
<section class="panel red">
  <p>This is page 1</p>
</section>
<section class="panel green">
  <p>This is page 2</p>
</section>
<section class="panel blue">
  <p>This is page 3</p>
</section>
<section class="panel orange">
  <p>This is page 4</p>
</section>
<section class="panel red">
  <p>This is page 5</p>
</section>
<section class="panel green">
  <p>This is page 6</p>
</section>
<section class="panel blue">
  <p>This is page 7</p>
</section>
<section class="panel orange">
  <p>This is page 8</p>
</section>

4

0 回答 0