jquery - 文本动画JQuery，在一页上多次

Question

我正在使用来自以下网址的移动字母 jQuery：https ://tobiasahlin.com/moving-letters/

尝试使用其中一个字母效果，我想在页面上的一系列 div 上多次使用它，并添加了一个脚本以在可见时加载，这有效 - 但只有一次。如果我重复它，它对每个人都不起作用。即使我更改类名等以使其独一无二，它仍然只能工作一次，而其余部分保持静态。

有什么建议吗？我想滚动浏览我的页面和每个 div 动画的 H1，因为它出现。寻找一个字母一个字母的幻灯片而不是渐变，这就是我选择移动字母的原因。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div>
<h1 class="ml1">
  <span class="text-wrapper">
  <span class="letters">THURSDAY</span>
  </span>
</h1>
</div>

<div>
<h1 class="ml1">
  <span class="text-wrapper">
  <span class="letters">THURSDAY</span>
  </span>
</h1>
</div>

CSS

.ml1 {
  font-weight: 900 !important;
  font-size: 3.5em !important;
}

.ml1 .letter {
  display: inline-block !important;
  line-height: 1em !important;
}

.ml1 .text-wrapper {
  position: relative !important;
  display: inline-block !important;
  padding-top: 0.1em !important;
  padding-right: 0.05em !important;
  padding-bottom: 0.15em !important;
}

.ml1 .line {
  opacity: 0 !important;
  position: absolute !important;
  left: 0 !important;
  height: 3px !important;
  width: 100% !important;
  background-color: #fff !important;
  transform-origin: 0 0 !important;
}

.ml1 .line1 {
  top: 0 !important;
}

.ml1 .line2 {
  bottom: 0 !important;
}

jQuery

function isElementVisible($elementToBeChecked)
    {
        var TopView = $(window).scrollTop();
        var BotView = TopView + $(window).height();
        var TopElement = $elementToBeChecked.offset().top;
        var BotElement = TopElement + $elementToBeChecked.height();
        return ((BotElement <= BotView) && (TopElement >= TopView));
    }

    $(window).scroll(function () {
        $( ".letters" ).each(function() {
            $this = $(this);
            isOnView = isElementVisible($(this));
            if(isOnView && !$(this).hasClass('Starting')){
                $(this).addClass('Starting');
                startAnimation($(this));
            }
        });
    });

    function startAnimation($this) {
            
        // Wrap every letter in a span
        var textWrapper = document.querySelector('.ml1 .letters');
        textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");

      anime.timeline({loop: false})
       .add({
       targets: '.ml1 .letter',
       scale: [0.3,1],
       opacity: [0,1],
       translateZ: 0,
       easing: "easeOutExpo",
       duration: 600,
       delay: function(el, i) {
       return 70 * (i+1)
       }
       }).add({
       targets: '.ml1',
       opacity: 0,
       duration: 0,
       easing: "easeOutExpo",
       delay: 0
       });
      };
    

标签： jqueryanimationrepeat