Scrollmagic是否可以根据滚动以不同的速度淡入/淡出项目

Question

我在一个可滚动的网站上工作---目前，动画是使用css3完成的。为这些部分提供了当前的类-隐藏对象以不同的延迟显示-文本，img，svg [子级]。因此，就像3个svg“岩石”一个接一个地出现一样，而不是一张在岩石上奔跑的女性图片-然后是一些文字-都消失了。

因此，我需要删除它并重构动画，以使其对用户滚动更加敏感。因此，如果用户刚刚开始在当前部分上滚动，则淡入淡出-可以像这样在它们之间滚动神奇的补间-还是窗口滚动的定制格式？向上滚动反转动画。

http://jsfiddle.net/sjyLa230/

  $(document).scroll(function() {
    var x = $(this).scrollTop();
    console.log(x)
    if (x > 500 && x < 1750) {
      $('#form_1_container').stop().fadeIn(150);
    } else {
      $('#form_1_container').stop().fadeOut(150);
    }
  });

这是一个小精灵动画，可以在动画中移动块并反转该动画-但它不能处理渐变。

https://jsfiddle.net/pwet4vLg/

let animations = {
  setup: function($container) {
    this.$container = $container;
    this.viewportWidth = $container.width();
    this.viewportHeight = $container.height();
  },
  createBlock: function(blockSpec) {
    let $block = $('<div>');
    $block.addClass(blockSpec.name);
    $block.addClass("animatedblock");
    $block.css("height", blockSpec.height);
    $block.css("width", blockSpec.width);
    $block.css("background", blockSpec.background);
    $block.css("background-size", "cover");
    this.$container.append($block);
    this.setPosition($block, blockSpec.x, blockSpec.y)
    return $block;
  },
  setPosition($block, x, y) {
    $block.css({
      left: x / 100 * this.viewportWidth,
      top: y / 100 * this.viewportHeight,
    });
  },
  moveBlock($block, frame, scrollProgress) {
    let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX);
    let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY);
    this.setPosition($block, blockPositionX, blockPositionY);
  },
  showBlock: function($block, frame) {
    $block.show()
    this.setPosition($block, frame.positionX, frame.positionY);
  },
  hideBlock: function($block) {
    $block.hide()
  },
}

class ScrollObserver {
  constructor() {
    let $window = $(window);
    this.STOP_DISPATCH = 'STOP_DISPATCH';
    this.subscribers = [];
    $window.scroll(event => this.dispatch($window.scrollTop()));
  }
  subscribe(subscriberFn) {
    this.subscribers.push(subscriberFn);
  }
  dispatch(scrollPosition) {
    for (let subscriberFn of this.subscribers) {
      if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break;
    }
  }
}

jQuery(function($) {
  animations.setup($('.container'));
  $(window).resize(event => animations.setup($('.container')));
  for (let obj of data) {
    let scrollObserver = new ScrollObserver();
    let blockSpec = obj.structure;
    let $block = animations.createBlock(blockSpec);
    for (let frame of obj.frames) {
      scrollObserver.subscribe(scrollPosition => {
        if (scrollPosition >= frame.start && scrollPosition <= frame.stop) {
          let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start);
          switch (frame.animation) {
            case 'move':
              animations.moveBlock($block, frame, scrollProgress);
              break;
            case 'show':
              animations.showBlock($block, frame);
          }
          return scrollObserver.STOP_DISPATCH;
        }
      });
    }
  }
});