How to animate each letter in a word on scroll?-CodePudding

On entering section (#stake-section) on scroll, I want each letter of the word "STAKE" to animate like this (See Pic). basically here, I want to change individual letter colors.

<section id="stake-section" >
    <div >
      <div >
        <div >
            <p id="stake">
              <span >S</span>
              <span >T</span>
              <span >A</span>
              <span >K</span>
              <span >E</span>
            </p>
        </div>
      </div>
    </div>
  </section>

CodePudding user response：

You could have a common class to apply standard styling to the letters, and unique classes for each of the letters for individually customized styles.

<span >S</span>
<span >T</span>

The class .active would allow you to apply common styling to all the letters. While .s would allow you to apply some styling to the letter S only and so on.

CodePudding user response：

You have to use Javascript for this requirement. I would use the wheel as event trigger. Then you can work with the classList function. It is important that you define partial areas here when the next letter is to be manipulated. Now you can add your style and work on the IF conditions.

use this example in the full page view

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 >  
  <section id="stake-section" >
    <div >
      <div >
        <div >
            <p id="stake">
              <span >S</span>
              <span >T</span>
              <span >A</span>
              <span >K</span>
              <span >E</span>
            </p>
        </div>
      </div>
    </div>
  </section>  
</div>