• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

滚动魔术 – 从播放停止动画?

JavaScript 来源:andersts 11次浏览

我一直在学习如何在我的网站上实现更多的动画。我试图找出这段代码,因为它与我想要实现的动画类似,但我似乎无法将它包裹起来。理想情况下,我希望动画只播放一次,以便在向后滚动时元素不会消失。但是,当您向后滚动时,我无法弄清楚什么是动画“倒退”。滚动魔术 – 从播放停止动画?

如何更改代码来执行此操作?

感谢

// 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

===========解决方案如下:

我想通了。我所要做的只是在构建场景时添加reverse: false

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)