Javascript 每张幻灯片水平滚动魔术容器中的视差内容会出现口吃

我有一个固定的滑块，当你通过更新内部包装的

X

值到达它时，它会水平移动。这部分很好用

然而，对于每一张幻灯片，我希望文本有一个视差效果（相对于当前幻灯片滚动时变慢）

下面是我设置的一个小（简化）测试用例：

但不幸的是，由于某些原因，文本似乎交错，动画也不平滑。这对我来说可能是魔法的API（对我来说是新的）

我有两个控制器，因为获得“视差”部分的唯一方法是将第二个控制器设置为

vertical:false

。也许这与此有关

非常感谢您的帮助

JavaScript

const ease = window.Power4.easeInOut
const el = document.querySelector('#el')
const wrapper = document.querySelector('#wrapper')
const slides = el.querySelectorAll('.El__slide')
const amount = slides.length
const controller = new window.ScrollMagic.Controller()
const horizontalMovement = new window.TimelineMax()

const controller2 = new window.ScrollMagic.Controller({
  vertical: false
})

horizontalMovement
  .add([
    window.TweenMax.to(wrapper, 1, {
      x: `-${(100 / amount) * (amount - 1)}%`
    })
  ])

new window.ScrollMagic.Scene({
    triggerElement: el,
    triggerHook: 'onLeave',
    duration: `${amount * 100}%`
  })
  .setPin(el)
  .setTween(horizontalMovement)
  .addTo(controller)

slides.forEach((item, index) => {
  const title = item.querySelector('h1')
  const subtitle = item.querySelector('h2')
  const tween = new window.TimelineMax()

  tween
    .fromTo(title, 1, { x: 0 }, { x: 500 }, 0)
    .fromTo(subtitle, 1, { x: 600 }, { x: 500 }, 0)

  new window.ScrollMagic.Scene({
      triggerElement: item,
      triggerHook: 1,
      duration: '100%'
    })
    .setTween(tween)
    .addTo(controller2)
})

SCSS

.El {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  &__wrapper {
    display: flex;
    width: 400vw;
    height: 100vh;
  }
  &__slide {
    display: flex;
    align-items: center;
    width: 100vw;
    padding: 50px;
    &:nth-child(1) {
      background-color: salmon;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: orange;
    }
    &:nth-child(4) {
      background-color: tomato;
    }
  }
  &__content {
    width: 100%;
  }
  &__title,
  &__subtitle {
    position: relative;
  }
}

HTML

<div id="el" class="El">
  <div id="wrapper" class="El__wrapper">
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title A</h1>
        <h2 class="El__subtitle">Subtitle A</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title B</h1>
        <h2 class="El__subtitle">Subtitle B</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title C</h1>
        <h2 class="El__subtitle">Subtitle C</h2>
      </div>
    </div>
    <div class="El__slide">
      <div class="El__content">
        <h1 class="El__title">Title D</h1>
        <h2 class="El__subtitle">Subtitle D</h2>
      </div>
    </div>
  </div>
</div>

标题A
副标题A
标题B
副标题B
标题C
副标题C
标题D
副标题D

我已经测试了你的代码，看起来一切都很好。如果你想在CSS中添加一个平滑的过渡，我可以推荐你。这样，您将有一个平稳的过渡

只需添加以下行：

&\uuuu标题，
&__副标题{
位置：相对位置；
}
/*添加下一行*/
&__头衔{
过渡：所有。1s线性；
}

您可以更改效果和时间。我将向您发送指向文档的链接：

---

我不确定我是否理解了你问题的实质。因为我的母语不同。但是，我想帮助你。 对于平滑的文本移动，这将帮助您：

.El__title, .El__subtitle {
    position: relative;
    transition-property: all;
    transition-duration: 900ms;
    transition-timing-function: ease;
    transition-delay: 0s;
}

---

如果我误解了你，那么给我举个例子，说明你到底需要什么。然后我将尝试提供帮助。

要使用ScrollMagic方法获得所需效果，您必须将refreshInterval:1设置为controller2

文件：

例如：

另一种方法。您可以将tweenChanges:true添加到场景中

文件：

例如：

---

这不是OP所要求的，应该修复它说的不平滑的部分，但是ScrollMagic的部分，我不清楚预期的结果是什么。稍后我会重新阅读，看看是否能获得更多信息：）不，它不会修复任何问题，因为转换是由GSAP应用的，并且是口吃/janky。老实说，该库存在一个重大问题。它不支持检查水平面上的可见性。这就是为什么它是破碎的和不稳定的。如果你做了垂直滚动，它可能会工作得很好。好的，谢谢@Deckerz-你能推荐另一个库来获得同样的效果吗？正如你所说的，垂直方向确实很好。我很确定我的代码很简单，所以我不知道错误是否在我身上。我花了一个多小时研究了它，发现tween同时应用于所有4个场景，即使它们是可见的。它只是检测到滚动轴是相同的。是的，我相信这是故意的。我希望每个二人组都与它所在的部分相对。因此，我们在每个部分上都有一个循环，为每个部分应用一个场景。感谢这些选项。其中，刷新间隔设置似乎效果最好。但是，您的最后一个示例不起作用，实际上出现了中断。CSS转换不是一个选项，因为它转换的是样式的变化……所以它不会完全停留在用户的滚动上。我有很多这样的答案，在我看来，这不是一个解决方案，更像是一个黑客。我会试试这些。谢谢你的检查。更新了最后一个示例。我交换了第一个和第二个示例，例如来自评论的示例。第二个是最正确的选项。还删除了基于CSS转换选项的第3个和第4个变体，如不正确。我很高兴出现了这些选项。在您的两个选项中，我使用refreshInterval选择了第一个。虽然它并不完美，但它似乎对标题的移动产生了最平滑的影响。谢谢你的研究！

const ease = window.Power4.easeInOut
const el = document.querySelector('#el')
const wrapper = document.querySelector('#wrapper')
const slides = el.querySelectorAll('.El__slide')
const amount = slides.length
const controller = new window.ScrollMagic.Controller()
const horizontalMovement = new window.TimelineMax()

const controller2 = new window.ScrollMagic.Controller({
  vertical: false,
  refreshInterval: 1
})

horizontalMovement
  .add([
    window.TweenMax.to(wrapper, 1, { x: `-${(100 / amount) * (amount - 1)}%` })
  ])

new window.ScrollMagic.Scene({
  triggerElement: el,
  triggerHook: 'onLeave',
  duration: `${amount * 100}%`
})
  .setPin(el)
  .setTween(horizontalMovement)
  .addTo(controller)

slides.forEach((item, index) => {
  const title = item.querySelector('h1')
  const subtitle = item.querySelector('h2')
  const tween = new window.TimelineMax()
  tween
    .fromTo(title, 1, { x: 0 }, { x: 500 }, 0)
    .fromTo(subtitle, 1, { x: 600 }, { x: 500 }, 0)
  new window.ScrollMagic.Scene({
    triggerElement: item,
    triggerHook: 1,
    duration: '100%'
  })
  .setTween(tween)
  .addTo(controller2)
})

const ease = window.Power4.easeInOut
const el = document.querySelector('#el')
const wrapper = document.querySelector('#wrapper')
const slides = el.querySelectorAll('.El__slide')
const amount = slides.length
const controller = new window.ScrollMagic.Controller()
const horizontalMovement = new window.TimelineMax()

const controller2 = new window.ScrollMagic.Controller({
  vertical: false
})

horizontalMovement
  .add([
    window.TweenMax.to(wrapper, 1, { x: `-${(100 / amount) * (amount - 1)}%` })
  ])

new window.ScrollMagic.Scene({
  triggerElement: el,
  triggerHook: 'onLeave',
  duration: `${amount * 100}%`
})
  .setPin(el)
  .setTween(horizontalMovement)
  .addTo(controller)

slides.forEach((item, index) => {
  const title = item.querySelector('h1')
  const subtitle = item.querySelector('h2')
  const tween = new window.TimelineMax()
  tween
    .fromTo(title, 1, { x: 0 }, { x: 500 }, 0)
    .fromTo(subtitle, 1, { x: 600 }, { x: 500 }, 0)
  new window.ScrollMagic.Scene({
    triggerElement: item,
    triggerHook: 1,
    duration: '100%',
    tweenChanges: true
  })
  .setTween(tween)
  .addTo(controller2)
})