javascript - 当内容滚动到 View 中时激事件画

Question

是否可以仅当元素在普通 JS 页面上可见时才播放动画？我有下面的文本显示动画代码，但我不确定我所要求的在普通 JS 中是否可行。我见过 JQuery 的多个选项，但没有见过 vanilla JS。我在 Stack 上看到了另一个类似的问题并给出了答案，但没有帮助。有什么想法吗？

<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap');
 .block-reveal {
     margin-bottom: 25px;
}
 .block-reveal__block {
     background: #389df5 !important;
}
 h1 {
     margin: 0;
     font-weight: 900;
     font-family: barlow;
}
 .block-reveal {
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     display: inline-block;
}
 .block-reveal__text {
     opacity: 0;
     margin: 0.3em 0.5rem;
}
 .block-reveal__block {
     content: "";
     background: #000;
     position: absolute;
     width: 100%;
     height: 1.3rem;
     margin-top: 0.8rem;
     z-index: 0;
     transform: translateX(0%);
}
 .block-reveal--active .block-reveal__text {
     animation: block-reveal-text 0s;
     animation-delay: 0.1s;
     animation-fill-mode: forwards;
}
 .block-reveal--active .block-reveal__block {
     animation: block-rev-block 1.1s;
     animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}
 @keyframes block-rev-block {
     0% {
         transform: translateX(-100%);
         z-index: 1;
         height: 2.1rem;
         background: #ff45d3;
    }
     50% {
         transform: translateX(calc(100% + 1px));
         height: 2.1rem;
    }
     100% {
         height: 1.3rem;
         transform: translateX(calc(0%));
         background: #389df5;
    }
}
 @keyframes block-reveal-text {
     0% {
         opacity: 0;
    }
     50% {
         opacity: 1;
         color: white;
    }
     100% {
         opacity: 1;
         color: white;
    }
}
 
</style>

<div>
  <div class="block-reveal block-reveal--active">
    <span class="block-reveal__block"></span>
    <h1 class="block-reveal__text">TESTIMONIALS</h1> 
  </div>
</div>

Answer 1

这可以借助 Intersection Observer 来完成(而不是计算滚动值)，而且文本动画不需要任何 span 标签，可以使用标题标签本身来完成。

输出(不要看FPS，它的输出更平滑):

相交观察器使用一个占据视口(viewport)尺寸(用户的网页可见区域)的矩形。当我们滚动时，只要目标元素(在我们的例子中为标题)与视口(viewport)相交，就会触发一个函数。

这里的intersectionRatio是指交集矩形与目标元素矩形的面积比(介于0和1之间)。如果它大于0，则意味着目标元素的某些部分在交集矩形或视口(viewport)内(我们知道 1 是什么意思)。如果您不明白，请访问下面的链接:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

const head_ing = document.querySelectorAll('.slide');

observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = "heading 1.5s 1 forwards";
    } else {
      entry.target.style.animation = "none";
    }
  });
});

head_ing.forEach(head => {
  observer.observe(head);
})

* {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
  color: black;
}

body {
  display: flex;
  flex-direction: column;
  margin: 10px 24px;
  height: 1400px;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 15px;
  margin-top: 300px;
  align-items: center;
  justify-content: center;
}

.content h1 {
  font-size: 3rem;
  align-self: flex-start;
  padding: 0px 0.625rem;
  background: linear-gradient(to right, white 50%, #389df5 50%);
  background-size: 200% 100%;
  background-position: 200% 100%;
  color: transparent;
  overflow: hidden;
  font-weight: normal;
}

@keyframes heading {
  0% {
    background-position: 200% 100%;
    color: transparent;
  }
  60% {
    background-position: 0% 100%;
    color: transparent;
  }
  60.1% {
    background-position: 0% 100%;
    color: white;
  }
  100% {
    color: white;
    background-position: 100% 100%;
  }
}

.content p {
  font-size: 1.25rem;
  margin: 20px 0;
}

<div class="content">
  <h1 class="slide">Testimonials-1</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>


<div class="content">
  <h1 class="slide">Testimonials-2</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>

<div class="content">
  <h1 class="slide">Testimonials-3</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>

<div class="content">
  <h1 class="slide">Testimonials-4</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.</p>
</div>