У меня есть закрепленный слайдер, который перемещается горизонтально, когда вы попадаете на него, обновляя значение 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;
&__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>
