滚动魔术 - 从播放停止动画？

• Z时代
• 2024-01-10
• 分类：问答

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

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

感谢

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

回答：

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

以上是 滚动魔术 - 从播放停止动画？ 的全部内容， 来源链接： utcz.com/qa/259190.html