0
330
ViewsHow to animate each letter in a word on scroll?
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>
2 answers
Answer question0
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>0
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.