元素之間的影片延遲

我有一個用 javascript 創建的簡單顯示影片，我遇到的問題是同一行上的元素都一起輸入，我希望它們之間有一個小的延遲，我無法實作。在移動設備上，他們可以堆疊起來，問題出在桌面上。希望可以有人幫幫我。非常感謝

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i  ) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}
body{
  background: #42455a;
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
section .container{
  margin: 100px;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
}
section .text-container .text-box{
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

<section>
  <h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>
<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

uj5u.com熱心網友回復：

您可以根據它們各自的索引使用超時來延遲它們.container。

就像是

function reveal() {
  const windowHeight = window.innerHeight;
  const elementVisible = 150;
  const visibilityLimit = windowHeight - elementVisible;
  const containers = document.querySelectorAll(".container");

  containers.forEach(container => {
    const reveals = container.querySelectorAll(".reveal");
    reveals.forEach((reveal, index) => {
      const elementTop = reveal.getBoundingClientRect().top;
      if (elementTop < visibilityLimit) {
        setTimeout(() => {
          reveal.classList.add("active")
        }, index * 250);
      } else {
        reveal.classList.remove("active");
      }
    });
  });
}

window.addEventListener("scroll", reveal);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}

body {
  background: #42455a;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section:nth-child(1) {
  color: #e0ffff;
}

section:nth-child(2) {
  color: #42455a;
  background: #e0ffff;
}

section:nth-child(3) {
  color: #e0ffff;
}

section:nth-child(4) {
  color: #42455a;
  background: #e0ffff;
}

section .container {
  margin: 100px;
}

section h1 {
  font-size: 3rem;
  margin: 20px;
}

section h2 {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}

section .text-container {
  display: flex;
}

section .text-container .text-box {
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}

section .text-container .text-box h3 {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  section h1 {
    font-size: 2rem;
    text-align: center;
  }
  section .text-container {
    flex-direction: column;
  }
}

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

<section>
  <h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>
<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

uj5u.com熱心網友回復：

您可以使用setTimeout以毫秒為單位執行延遲函式。在下面修改后的顯示函式中，我在 for 回圈中使用了它。通過在每次呼叫setTimeout時添加半秒（500 毫秒），您可以創建延遲效果。

function reveal() {
  var reveals = document.querySelectorAll(".reveal");
  let timeOutMili = 0;

  for (var i = 0; i < reveals.length; i  ) {
    setTimeout(function(reveal) {
      var windowHeight = window.innerHeight;
      var elementTop = reveal.getBoundingClientRect().top;
      var elementVisible = 150;
      
      if (elementTop < windowHeight - elementVisible) {
        reveal.classList.add("active");
      } else {
        reveal.classList.remove("active");
      }
    }, timeOutMili, reveals[i]);
    timeOutMili  = 500;
  }
}

標籤：javascript html css 动画 CSS动画

上一篇：Matplotlib圖在y軸上顯示2個標簽

下一篇：洗掉HTML/CSS中的頁腳