1
我一直在學習如何在我的網站上實現更多的動畫。我試圖找出這段代碼,因爲它與我想要實現的動畫類似,但我似乎無法將它包裹起來。理想情況下,我希望動畫只播放一次,以便在向後滾動時元素不會消失。但是,當您向後滾動時,我無法弄清楚什麼是動畫「倒退」。滾動魔術 - 從播放停止動畫?
如何更改代碼來執行此操作?
感謝
// init
var controller = new ScrollMagic.Controller();
// loop
$('.reveal_main').each(function() {
var loaderInit = new TimelineMax();
// tween variables
if ($(this).hasClass('left')) {
var imgSet = 20,
imgBlockFrom = -101,
imgBlockTo = 101,
contTextSet = -30,
textBlockStaggerFrom = 101,
textBlockStaggerTo = -101;
} else {
var imgSet = -20,
imgBlockFrom = 101,
imgBlockTo = -101,
contTextSet = 30,
textBlockStaggerFrom = -101,
textBlockStaggerTo = 101;
}
// build a tween
loaderInit
.set($(this).find('.reveal_cont-img'), {autoAlpha:1,xPercent:imgSet},0)
.from($(this).find('.reveal_block-img'), 0.325,{xPercent:imgBlockFrom, ease:Power1.easeOut})
.set($(this).find('.reveal_img'), {autoAlpha:1})
.to($(this).find('.reveal_block-img'), 0.225,{xPercent:imgBlockTo, ease:Sine.easeOut})
.set($(this).find('.reveal_cont-text'), {autoAlpha:1,xPercent:contTextSet},0.3)
// stagger text blocks and text
.staggerFromTo($(this).find('.reveal_block'), 0.7, {xPercent:textBlockStaggerFrom, ease:Power1.easeOut}, {xPercent:textBlockStaggerTo, ease:Power1.easeOut},0.25)
.add('blocksEnd')
.staggerTo($(this).find('.reveal_text'), 0.1, {autoAlpha:1},0.25,'blocksEnd-=0.75')
// build a scene
var scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook:'onEnter',
offset:700
})
.setTween(loaderInit)
.addTo(controller)
});
這裏的codepen:https://codepen.io/tayanderson/pen/POVEVJ