隐藏动画字母直到动画播放

Question

上下文： 我有一个副标题“关于我”，一旦它出现在屏幕上（每次），它就会与库 animejs 一起动画。你可以找到动画here，我是从Tobia's Moving Letters那里得到的

问题： 当我向下滚动到字幕时，我可以在动画播放前看到它。所以换句话说：我向下滚动，我读了副标题“关于我”，然后它就消失了，只是让字母一个接一个地弹出。

这不是想要的，我正在寻找一种方法来隐藏初始文本“关于我”，然后让每个动画字母出现

我在一些虚拟文本下制作了一个带有副标题的片段，以便可以滚动到其中。

// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

const subtitle_animation = anime({
    targets: '.subtitle .ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 100 * i + 500
})

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}

const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true

document.addEventListener('scroll', function () {

    isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
    
    if (aboutme_vis && ready_to_play) {
        subtitle_animation.restart();
        ready_to_play = false
    } 

    if (!aboutme_vis){
        
        ready_to_play = true
    }
    
});

/* Subtitle Animation */
.subtitle .ml6 {
  position: relative;
  font-size: 1em;
}

.ml6 .text-wrapper-subtitle {
  position: relative;
  display: inline-block;
  padding-right: 10%;
  overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
  transform-origin: 0 0;
}

<div class="">
  <h1>Title</h1>
  <p>The subtitle About me can be found below! </p>
  <h2>Random text so its possible to scroll: </h2>
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
</div>

<div class="row main-margin" id="about-me">
  <h1 class="subtitle">
    <span class="ml6">
      <span class="text-wrapper-subtitle">
        <span class="letters">About me</span>
      </span>
    </span>
  </h1>
</div>

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

作为奖励，我想要一种在每次滚动出屏幕时再次隐藏文本的方法。

这是我的第一个 Whosebug 问题！我希望有人能帮助我

Answer 1

老实说，很可能有比这更好的解决方案。但这是我发现接近你想要的东西的快速方法。这样做的问题是，如果它从一开始就在视口中并且没有发生滚动，它将永远不会显示。您必须处理 that.Using 一个 IntersectionObserver 可能更适合您的情况。

// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

const subtitle_animation = anime({
    targets: '.subtitle .ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 100 * i + 500
})

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}

const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true

document.addEventListener('scroll', function () {

    isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
    
    if (aboutme_vis && ready_to_play) {
        subtitle_animation.restart();
        setTimeout( () => {
          aboutme.style.visibility = "visible";
        } );
        
        ready_to_play = false
    } 

    if (!aboutme_vis){
        aboutme.style.visibility = "hidden";
        ready_to_play = true
    }
    
});

/* Subtitle Animation */
.subtitle .ml6 {
  position: relative;
  font-size: 1em;
}

.ml6 .text-wrapper-subtitle {
  position: relative;
  display: inline-block;
  padding-right: 10%;
  overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
  transform-origin: 0 0;
}

#about-me {
  visibility: hidden;
}

<div class="">
  <h1>Title</h1>
  <p>The subtitle About me can be found below! </p>
  <h2>Random text so its possible to scroll: </h2>
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  <p>
  
</div>

<div class="row main-margin" id="about-me">
  <h1 class="subtitle">
    <span class="ml6">
      <span class="text-wrapper-subtitle">
        <span class="letters">About me</span>
      </span>
    </span>
  </h1>
</div>

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

隐藏动画字母直到动画播放

hide animated letters until animation plays

html

javascript

css

animation

animejs