Question

我一直在学习如何在我的网站上实现更多动画。我试图找出这个代码，因为它类似于我想要实现的动画，但我似乎无法绕过它。理想情况下，我希望动画只播放一次，这样当我向上滚动时元素不会消失。但是，我无法弄清楚制作动画的内容＆＃34;反向＆＃34;当你向后滚动时。

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

感谢

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

Answer 1

我明白了。我所要做的就是在构建场景时添加data <- data.frame(col1 = c("A","A","B","B"), col2 = c("B","C","A","C"), value = c(1,2,3,4), stringsAsFactors = FALSE) library(dplyr) data2 <- data %>% rowwise() %>% mutate(dyad = paste(sort(c(col1, col2)), collapse = "_")) %>% select(dyad, value) %>% ungroup() data2 # # A tibble: 4 x 2 # dyad value # <chr> <dbl> # 1 A_B 1 # 2 A_C 2 # 3 A_B 3 # 4 B_C 4。

reverse: false

Scroll-Magic - 停止重播动画？

1 个答案: