Question

我正尝试在我的网站上使用ScrollMagic.js来显示文本段落。我的脚本已经可以淡化文本，但是我想在文本淡入时创建一些暂停效果，一旦效果结束，滚动就将继续。官方website上有类似的内容。标题效果通过后，整个页面向下滚动。

有人可以帮我重写它吗，所以滚动将一直等到整个动画结束之后？我打算做更多的动画，效果会更好。

(function($) {
  $(function() {

    if (document.documentElement.clientWidth > 768) {
      // init controller
      var controller = new ScrollMagic.Controller();
      // Fade in
      var fadeInTimeline = new TimelineMax();
      var fadeInFrom = TweenMax.from("#opacity", 1, {
        autoAlpha: 0
      });
      var fadeInTo = TweenMax.to("#opacity", 1, {
        autoAlpha: 1
      });
      fadeInTimeline
        .add(fadeInFrom)
        .add(fadeInTo);

      new ScrollMagic.Scene({
          triggerElement: "#slidein2",
          offset: 200,
        })
        .setTween(fadeInTimeline)
        .duration(400)
        .addTo(controller);

      //Fly in from the left
      var fromBottomTimeline = new TimelineMax();
      var fromBottomFrom = TweenMax.from("#bottom", 1, {
        y: 300
      });
      var fromBottomTo = TweenMax.to("#bottom", 1, {
        y: 0
      });
      fromBottomTimeline
        .add(fromBottomFrom)
        .add(fromBottomTo);

      new ScrollMagic.Scene({
          triggerElement: "#slidein2",
          offset: 200,
        })
        .setTween(fromBottomTimeline)
        .duration(400)
        .addTo(controller);

    }

  }); // end of document ready
})(jQuery); // end of jQuery name space

.blabler {
  color: white;
  font-size: 30pt;
  margin: 5rem 15rem !important;
  line-height: 60pt;
  text-justify:inter-word;
  font-family: 'Metrophobic', sans-serif;

}

.blabler .right {
text-align: right;
}

.blabler .center {
text-align: center;
text-justify:inter-character;
}

.blabler .left {
text-align: left;
text-justify:inter-character;
}
body {
	background-color: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Metrophobic|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js"></script>


  <div id="slidein2" class="row blabler">
    <div class="col s12">
      <div class="center-align">
        <span id="left" class="left textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
        <span class="right textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
        <span id="opacity" class="center textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
        <span class="right textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
        <span id="bottom" class="center textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
        <span class="right textf">Nulla quis diam. Sed elit dui, pellentesque a.</span>
      </div>
    </div>
  </div>

Answer 1

ScrollMagic不等待动画完成。而是将start部分固定在页面顶部，即将位置设置为固定。

// container pin
var startpin = new ScrollMagic.Scene({
        duration: 700
 })
 .setPin("section#start")
 .addTo(controller);

这是演示页面上的代码。它将起始div的位置保持在前700 px的滚动位置。

您还可以使用end事件来释放职位。

ScrollMagic-补间-文本淡入和淡出

1 个答案: