How to animate each letter in a word on scroll?

user_10662458 0
Viewed 174

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" 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>

enter image description here

css-animations css-transitions css html javascript
2 Answers

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 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>

user_148071110

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 class="active s">S</span>
<span class="active t">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.

user_137891890
Related