Question

作为文档

triggerElement的值将是选择器，DOM对象或jQuery 对象，用于定义场景的开始。如果未定义场景将在页面开头处开始（除非设置了偏移量）。

但我认为这不适合我的情况。

我的HTML看起来像

....
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc1.jpg" width="100px" >
    </div>
</section>
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc2.jpg" width="100px" >
    </div>
</section>
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc3.jpg" width="100px" >
    </div>
</section>
....

我想在用户滚动到相应部分时制作动画。下面是我的JS代码片段。

  var scrollMagicController = new ScrollMagic.Controller({
    globalSceneOptions: {
      duration: 100
    }
  });

  $("section").each(function(index, elem) {
    var tween = TweenMax.to(elem, 1, {
      ease: SlowMo.ease.config(0.7, 0.7, false),
      opacity: 1,
      repeat: 1
    });

    var childElems = $(elem).find(".magicScroll");
    var scene = new ScrollMagic.Scene({
      duration: 200,
      triggerElement: childElems,
    // offset: -500
    }).setTween(tween).addTo(scrollMagicController);
  });

我总是在我的firefox开发者控制台中收到错误

12:11:02:444 (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found:

我应该如何理解它才能正常工作？

Answer 1

我也应该迭代childElems。以下是我的工作代码供以后参考。

  $("section").each(function(index, elem) {
    $(elem).addClass("animate-container" + index);
    var tween = TweenMax.to(".animate-container" + index, 1, {
      ease: Back.easeInOut.config(1.7),
      opacity: 1,
    });

    var childElems = $(elem).find(".magicScroll");
    $(childElems).each(function(innerIndex, childElem) {
      $(childElem).addClass("animate" + innerIndex);
      var scene = new ScrollMagic.Scene({
        tweenChanges: true,
        triggerElement: ".animate-container" + index + " .animate" + innerIndex,
        offset: -300,
        reverse: false,
      }).setTween(tween).addTo(scrollMagicController);
    });

  });

ScrollMagic：JQuery元素不适用于triggerElement

1 个答案: