时间戳

首页 > 解决方案 > 滚动时滑入的所有标题 - JavaScript

javascript - 滚动时滑入的所有标题 - JavaScript

问题描述

所以我正在编写一些代码，其中标题在滚动时从左侧或右侧滑入。我已经使用 document.querySelector('subtitle-left) 来选择每个单独的标题，但是您将如何做到这一点，以便所有标题在使用相同的代码滚动时滑入？而不是为一个标题写同样的东西。我知道您可能必须使用 forEach 循环 - 我将如何为下面的代码编写这个？

function slideInLeft() {
  var greenBox = document.querySelector('.subtitle-left');
  var greenPosition = greenBox.getBoundingClientRect().top;
  var screenPosition = window.innerHeight / 1.2;

  if (greenPosition < screenPosition) {
    greenBox.classList.add('slide-in-left');
  }

}

window.addEventListener('scroll', slideInLeft);
.green-box-left {
  display: block;
  position: relative;
  width: 20vw;
  height: 6vw;
  background: #daf4dc;
}

.subtitle-left {
  font-family: 'termina', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.3vw;
  position: absolute;
  color: black;
  transition: 1s all;
  left: 28%;
  margin-top: 9%;
  transform: translateX(-139%);
}

.slide-in-left {
  transform: translateX(0%);
}
<div class="green-box-left">
  <h5 class="subtitle-left">HOMEPAGES</h5>
</div>

<br><br>

<div class="green-box-left">
  <h5 class="subtitle-left">HOMEPAGES 2</h5>
</div>

标签： javascripthtmlcssfor-loopforeach

解决方案

您需要添加 querySelectorAll 以获取该类的所有实例，然后稍微重写您的代码以包含您已经遵守的 forEach 循环。您可以尝试类似的方法：

  function slideInLeft() {
        var greenBox = document.querySelectorAll('.subtitle-left');
     
        greenBox.forEach(function(box) {

            var greenPosition = box.getBoundingClientRect().top;
        var screenPosition = window.innerHeight / 1.2;
  
        if (greenPosition < screenPosition) {
          box.classList.add('slide-in-left');
        }
       
});
} 
window.addEventListener('scroll', slideInLeft);

推荐阅读