一个场景用 ScrollMagic 触发多个元素

Question

我正在使用 ScrollMagic 在元素进入屏幕后立即淡入，效果很好，但仅适用于第一个元素，但不会触发其余元素。我希望每个元素都被触发并且只使用一个场景来做到这一点。

const controller = new ScrollMagic.Controller();

var scenefadein = new ScrollMagic.Scene({
 triggerElement: ".fade-in",
 triggerHook: 1,
 offset: 0,
  reverse: true
})
.setClassToggle(".fade-in", "visible")
.addTo(controller);

.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

Answer 1

我找到了使用 TweenMax 和 jQuery 的解决方案。

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.fade-in').each(function() {
  
  // build a tween
  var tween = TweenMax.from($(this), 0.7, {autoAlpha: 0, y: '+=200', x: '0', ease:Linear.easeNone});

  // build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
 triggerHook: 0.7,
 offset: 0,
  reverse: true
  })
  .setTween(tween)
  .addTo(controller);
  
});

.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>



<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

一个场景用 ScrollMagic 触发多个元素

Trigger multiple elements with ScrollMagic with one scene

javascript

scrollmagic

gsap