通过更新内部包装器的X
值,我有一个固定的滑块,当你到达它时,它会水平移动。这部分效果很好。
但是,对于每个单独的幻灯片,我希望对文本具有视差效果(在滚动时变慢 - 相对于当前幻灯片)。
这是我设置的一个小(简化)测试用例:https://codepen.io/michaelpumo/pen/EJgWgd
不幸的是,由于某些原因,文本似乎错开,动画也不顺畅。这可能与我误解了ScrollMagic的API(对我而言是新的)。
我有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>
要使用ScrollMagic方法获得所需的效果,您必须将refreshInterval:1设置为controller2。
文档:qazxsw poi
示例:http://scrollmagic.io/docs/ScrollMagic.Controller.html#constructor
https://codepen.io/biomagic/pen/dLgzJO
另一种方法。您可以将tweenChanges:true添加到场景中。
文档: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)
})
示例: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)
})
如果我误解了你,那么告诉我一个你最终需要的例子。然后我会尽力帮忙。
我已经测试了你的代码并且看起来很不错。如果你想要一个平滑的行为来添加到CSS的过渡,我可以推荐你。通过这种方式,您将获得平稳过渡。
只需添加以下行:
.El__title, .El__subtitle {
position: relative;
transition-property: all;
transition-duration: 900ms;
transition-timing-function: ease;
transition-delay: 0s;
}
你可以改变效果和时间。我发给你一个文档的链接:&__title,
&__subtitle {
position: relative;
}
/* Add the next lines */
&__title {
transition: all .1s linear;
}