0

上下文： 我有一个副标题“关于我”，只要它在屏幕中出现（每次），就会使用动画库动画。你可以在这里找到动画，我从 Tobia 的 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>

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

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

4

1 回答 1

1

所以说实话，很可能有比这更好的解决方案。但这是我发现接近你想要的东西的一种快速方法。这样做的问题是，如果它从一开始就在视口中并且没有发生滚动，它将永远不会显示。你必须处理这个问题。在这里使用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>

于 2021-12-11T23:11:57.863 回答