ScrollMagic - Tween - постепенное появление и исчезновение текста - PullRequest
Новая
       14

ScrollMagic - Tween - постепенное появление и исчезновение текста

0 голосов
/ 04 октября 2018

Я пытаюсь использовать ScrollMagic.js на моем веб-сайте для отображения текстовых абзацев.Мой сценарий уже может затушевать текст, но я хотел бы создать что-то в качестве паузы, пока текст не исчезнет, ​​и как только эффект закончится, прокрутка продолжится.Нечто подобное есть на официальном сайте .Вся страница прокручивается вниз после того, как влияние на заголовок прошло.

Может кто-нибудь помочь мне, как переписать его, так что прокрутка будет ждать, пока не закончится вся анимация?Я планирую сделать больше анимации, и эффект будет лучше. 

(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>

1 Ответ

0 голосов
/ 04 октября 2018

ScrollMagic не ожидает завершения анимации.Вместо этого он прикрепляет секцию start к верхней части страницы, то есть устанавливает фиксированное положение. 

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

Это код на демонстрационной странице.Он сохраняет начальный div в позиции для первой прокрутки на 700 пикселей.

Вы также можете сделать это, используя событие end, чтобы освободить позицию.

...