2017-12-03 114 views
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

回答

0

我想通了。我所要做的只是在構建場景時添加reverse: false

var scene = new ScrollMagic.Scene({ 
    triggerElement: this, 
    triggerHook:'onEnter', 
    offset:700, 
    reverse: false 
})