我有一个固定的 slider ,当您通过更新内部包装器的 X
值到达它时,它会水平移动。这部分效果很好。
但是,对于每张单独的幻灯片,我希望文本具有视差效果(滚动时速度变慢 - 相对于当前幻灯片)。
这是我设置的一个小型(简化)测试用例: https://codepen.io/michaelpumo/pen/EJgWgd
不幸的是,出于某种原因,文本似乎交错并且动画不流畅。这可能是我误解了 ScrollMagic 的 API(它对我来说是新的)。
我有 2 个 Controller ,因为获得“视差”部分的唯一方法是将第二个 Controller 设置为 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>
最佳答案
要使用 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)
})
关于javascript - 每张幻灯片的水平 ScrollMagic 容器中的视差内容断断续续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55562056/