Содержание параллакса в горизонтальном контейнере ScrollMagic для каждого слайда заикается

Ответ 1

Чтобы получить желаемый эффект, используя методы ScrollMagic, вы должны установить refreshInterval: 1 для controller2.

Документация: http://scrollmagic.io/docs/ScrollMagic.Controller.html#constructor

Пример: https://codepen.io/biomagic/pen/dLgzJO

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)
})

Другой подход. Вы можете добавить tweenChanges: true к вашей сцене.

Документация: http://scrollmagic.io/docs/animation.GSAP.html#newScrollMagic.Sceneoptions

Пример: https://codepen.io/biomagic/pen/rbqpMb

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)
})

Ответ 2

Я не уверен, что понял суть вашего вопроса. Потому что мой родной язык другой. Но я хочу помочь тебе. Для плавного перемещения текста это поможет вам:

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

Если я вас неправильно понял, то покажите мне пример того, что вам нужно в конце. Тогда я постараюсь помочь.

Ответ 3

Я думаю, что ваш CSS просто нужно пару настроек. Во-первых, удалите добавленные браузером отступы в верхней части CSS, используя

*{margin:0px; 
  padding:0px;}

Похоже, основной проблемой является отступ в 50 пикселей. Я удалил его из _slide и добавил к _title в css, и отрегулировал ширину содержимого от width:100% до max-width:100%;

Еще одна вещь, которую я хотел бы предложить, это то, что вы можете добавить навигационные точки в верхний угол первого слайда (для плавного "перехода"/прокрутки между слайдами.) Возможно, подумайте об этом.

Вот кодекс (раздвоенный от твоего). Прокомментируйте, если проблема была неправильно истолкована, или вы чувствуете, что проблема по-прежнему существует.

Надеюсь это поможет

Ответ 4

Я проверил ваш код и выглядит все хорошо. Я могу порекомендовать вам, если вы хотите, чтобы плавное поведение добавляло переход к вашему CSS. На этом пути у вас будет плавный переход.

Просто добавьте эти строки:

&__title,
&__subtitle {
  position: relative;
}

/* Add the next lines */
&__title {
  transition: all .1s linear;
}

Вы можете изменить эффекты и время. Я отправляю вам ссылку на документы: Переход DOCS