Question

我想让ScrollMagic控制网页的一部分。将是一组固定并具有淡入淡出效果的幻灯片，在您滚动页面时会发生变化。

当我从上到下滚动时有效，但是当我到达页面末尾并向上滚动时，没有动画。

如何在反向方向上实现相同的行为？

	$(function () { 
		var controller = new ScrollMagic.Controller({
			globalSceneOptions: {
				triggerHook: 'onLeave'
			}
		});

		var slides = document.querySelectorAll("section.panel");

		for (var i=0; i<slides.length; i++) {
            var animation = TweenMax.to(slides[i], 1, { autoAlpha: 1, ease: Quad.easeInOut});
            var options = { triggerElement: slides[i] };
            if(i === slides.length-1){
                options['duration'] = 0;
            }
			var scene = new ScrollMagic.Scene(options)
				.setPin(slides[i])
                .setTween(animation)
                .addIndicators();
            scene.addTo(controller);
		}
	});

.panel {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: white;
  opacity: 0;
}
.panel.first {
  opacity: 1;
}
.panel.last{
margin-bottom: 400px;
}
.panel .column {
  width: 50%;
}
.panel .column.vertical-center {
  margin: auto 0;
  padding: 0 5em;
}
.panel .column .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: black;
  line-height: 1.1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="slide1" class="panel first">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 1
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 2
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 3
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 4
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 5
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide6" class="panel last">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 6
    </div>
    <p>Description</p>
  </div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

Answer 1

场景参数reverse应该可以解决这个问题。默认情况下将其设置为true，并且在向上滚动时应反向播放动画。在这里设置参数：

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1,
    reverse: true
    });

或在此处添加

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1
    }).reverse(true)

Answer 2

您可以使用下面的代码来反转滚动魔术动画：

var scene = new ScrollMagic.Scene(options)
            .setPin(slides[i])
            .setTween(animation)
            .addIndicators();
            .reverse(true); // this will reverse your animation in scrollmagic
        scene.addTo(controller);

使用ScrollMagic反向动画

2 个答案: