如何为卷轴上的单词中的每个字母设置动画？

Question

在滚动输入 section (#stake-section) 时，我想要单词“STAKE”的每个字母 像这样动画（见图）。基本上在这里，我想更改单个字母的颜色。

<section id="stake-section" class="stake bgColor2">
    <div class="container h-100 p-0">
      <div class="row h-100">
        <div class="col-lg-12 text-center">
            <p id="stake">
              <span class="active_s">S</span>
              <span class="active_t">T</span>
              <span class="active_a">A</span>
              <span class="active_k">K</span>
              <span class="active_e">E</span>
            </p>
        </div>
      </div>
    </div>
  </section>

Answer 1

您必须使用 Javascript 来满足此要求。我会使用轮子作为事件触发器。然后您可以使用 classList 函数。当要操作下一个字母时，在此处定义部分区域非常重要。现在您可以添加您的样式并处理 IF 条件。

在完整页面视图中使用此示例

const el = document.querySelector('.w');
const spans = document.querySelectorAll('#stake span');
let counter = 0;
el.addEventListener("wheel", ev => {
  /* code here */    
  const direction_1 = ev.deltaY;
  
  
  
  spans.forEach(i => {
    
    if (direction_1 < 0) {      
      console.log('scrolling up');
      counter = counter - 1;
        if (counter < 40) {
          document.querySelector('#stake span:nth-child(5)').classList.remove('boom')
        }
        if (counter < 30) {
          document.querySelector('#stake span:nth-child(4)').classList.remove('boom')
        }       
        if (counter < 20) {
          document.querySelector('#stake span:nth-child(3)').classList.remove('boom')                  
        }   
        if (counter < 10) {
          document.querySelector('#stake span:nth-child(2)').classList.remove('boom')                  
        }         
        if (counter < 1) {
          document.querySelector('#stake span:nth-child(1)').classList.remove('boom')                  
        }               
    
    } else {      
      counter = counter + 1;
      if (! i.classList.contains('boom')) {
        if (counter > 1) {
          document.querySelector('#stake span:nth-child(1)').classList.add('boom')
        }
        if (counter > 10) {
          document.querySelector('#stake span:nth-child(2)').classList.add('boom')
        }        
        if (counter > 20) {
          document.querySelector('#stake span:nth-child(3)').classList.add('boom')
        }
        if (counter > 30) {
          document.querySelector('#stake span:nth-child(4)').classList.add('boom')
        }        
        if (counter > 40) {
          document.querySelector('#stake span:nth-child(5)').classList.add('boom')
        }      
      }
    }
    console.log(counter);
    
    //i.classList.toggle('boom');
  })
})

.w {  
  background: gray;
  height:120px;
  overflow:scroll;
  overflow-x:hidden;  
  text-align:center;
}
.w span {
  font-size:40px;
  font-weight: bold;
}

.boom {
  color: red
}

<div class="w">  
  <section id="stake-section" class="stake bgColor2">
    <div class="container h-100 p-0">
      <div class="row h-100">
        <div class="col-lg-12 text-center">
            <p id="stake">
              <span class="active_s">S</span>
              <span class="active_t">T</span>
              <span class="active_a">A</span>
              <span class="active_k">K</span>
              <span class="active_e">E</span>
            </p>
        </div>
      </div>
    </div>
  </section>  
</div>

Answer 2

您可以有一个通用类来将标准样式应用于字母，并为每个字母提供独特的类以实现单独定制的样式。

<span class="active s">S</span>
<span class="active t">T</span>

.active 类允许您对所有字母应用通用样式。 而 .s 将允许您仅对字母 S 应用一些样式，依此类推。