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

ProgramBox

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

Post author:admin
Запись опубликована:31 марта, 2023
Post category:Вопросы по программированию

#javascript #css #scrollmagic

#javascript #css #магия прокрутки

Вопрос:

У меня есть закрепленный слайдер, который перемещается горизонтально, когда вы переходите к нему, обновляя X значение внутренней оболочки. Эта часть отлично работает.

Однако для каждого отдельного слайда я хотел бы иметь эффект параллакса для текста (чтобы при прокрутке текст шел медленнее — относительно текущего слайда).

Вот небольшой (упрощенный) тестовый пример, который я настроил:https://codepen.io/michaelpumo/pen/EJgWgd

К сожалению, по какой-то причине текст, кажется, шатается, а анимация не гладкая. Это может быть связано с тем, что я неправильно понимаю API ScrollMagic (для меня это ново).

У меня есть 2 контроллера, потому что единственным способом, которым я мог получить часть «параллакс», было установить контроллер на 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;
  amp;__wrapper {
    display: flex;
    width: 400vw;
    height: 100vh;
  }
  amp;__slide {
    display: flex;
    align-items: center;
    width: 100vw;
    padding: 50px;
    amp;:nth-child(1) {
      background-color: salmon;
    }
    amp;:nth-child(2) {
      background-color: blue;
    }
    amp;:nth-child(3) {
      background-color: orange;
    }
    amp;:nth-child(4) {
      background-color: tomato;
    }
  }
  amp;__content {
    width: 100%;
  }
  amp;__title,
  amp;__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>

1. Честно говоря, с этой библиотекой есть серьезная проблема. Он не поддерживает проверки видимости по горизонтали. Вот почему все это сломано и отрывисто. Если вы сделали вертикальную прокрутку, она, вероятно, будет работать нормально.

2. Хорошо, спасибо @Deckerz — можете ли вы порекомендовать другую библиотеку для получения того же эффекта? Вертикальный работает нормально, как вы говорите. Я почти уверен, что мой код достаточно прост, поэтому я не могу понять, ошибка во мне или нет.

3. Я поиграл с ним час с небольшим и обнаружил, что анимация применяется ко всем 4 сценам одновременно, даже если они видны. Он просто определяет, что ось прокрутки одинакова.

4. Да, я считаю, что это намеренно. Я хотел, чтобы каждая анимация была относительно раздела, в котором она находится. Итак, у нас есть цикл над разделами, который применяет сцену для каждого.

Ответ №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 .Варианты сцен

Пример: 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)
})

1. Спасибо за эти опции. Из всех них настройки refreshInterval, похоже, работают лучше всего. Ваш последний пример, однако, не работает и фактически ломается. Переход CSS не является вариантом, потому что это приводит к изменению styles…so оно не будет точно соответствовать пользовательской прокрутке. У меня было много подобных ответов, и это не решение, ИМО, скорее взлом. Я попробую это.

2. Спасибо за проверку. Обновлен последний пример.

3. Я поменял местами 1-й и 2-й примеры, например, из обзоров, 2-й был наиболее правильным вариантом. Также удалены 3-й и 4-й варианты, основанные на опции перехода CSS, как неправильные. Я рад, что появились эти опции.

4. Из обоих ваших вариантов я выбрал первый, используя refreshInterval. Хотя оно и не идеально, оно, по-видимому, оказывает наиболее плавное влияние на перемещение заголовка. Спасибо за ваше исследование!

Ответ №2:

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

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

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

Ответ №3:

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

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

 amp;__title,
amp;__subtitle {
  position: relative;
}

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

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

1. Это не то, о чем просит OP

2. Это должно исправить ту часть, о которой говорится, что она не гладкая, но часть ScrollMagic, я не совсем понимаю, каков ожидаемый результат. Я перечитаю позже и посмотрю, поймаю ли я больше информации 🙂

3. Нет, это ничего не исправит, потому что переходы применяются GSAP и являются прерывистыми.