嗨,我正在尝试 使用 TweenMax复制此页面部分http://cuberto.com上的转换。
var slides=document.querySelectorAll('.slide');
var tl=new TimelineLite({paused:true});
for(var i=slides.length;i--;){
var D=document.createElement('div');
D.className='Dot';
D.id='Dot'+i;
D.addEventListener('click',function(){ tl.seek(this.id).pause() });
document.getElementById('Dots').appendChild(D);
tl.add('Dot'+i)
if(i>0){
if(i!=slides.length-1)
{
tl.addPause()
}
tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"})
.fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut})
.to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0)
.set(slides[i],{ background: "none"})
.fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3)
.to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
.set(slides[i],{zIndex:1-i})
.set(slides[i-1],{zIndex:slides.length})
.to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6)
.fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6)
};
};
codepen 的完整代码可以在这里找到
我基本上是在尝试在一堆带有滑动动画的滑块之间进行转换,我已经在每张幻灯片上用黑色或粉红色交替了我想转换的元素,这样我就可以看到动画了。
我似乎可以将动画与当前幻灯片隔离 - 本质上我希望左侧 div 增长到 100%,然后在页面右侧设置动画,然后切换到下一个滑块并将左侧潜水设置为一个宽度50% 从初始状态 0。我相信这就是 Cuberto 网站正在做的事情。
我怎么会因为滚动事件在所有幻灯片上触发动画而陷入困境。
我对香草 javascript 不是特别胜任,但想尝试使用或不使用 jQuery。
我已经尝试过 pagepiling.js 和 fullpage.js 但这并没有达到我想要的效果。
我真的可以做一个我可以去我的客户那里的决议,或者至少一个我可以去的方向。
谢谢