0
332
Vistas¿Cómo animar cada letra en una palabra en el pergamino?
Al ingresar a la sección (#stake-section) en el desplazamiento, quiero que cada letra de la palabra "Stake" se anime así (ver foto). básicamente aquí, quiero cambiar los colores de las letras individuales.
<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 Respuestas
Responde la pregunta0
Tienes que usar Javascript para este requisito. Usaría la rueda como disparador de eventos. Entonces puede trabajar con la función classList. Es importante que defina áreas parciales aquí cuando se vaya a manipular la siguiente letra. Ahora puede agregar su estilo y trabajar en las condiciones IF.
use este ejemplo en la vista de página completa
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
Podría tener una clase común para aplicar un estilo estándar a las letras y clases únicas para cada una de las letras para estilos personalizados individualmente.
<span class="active s">S</span> <span class="active t">T</span>La clase .active le permitiría aplicar un estilo común a todas las letras. Mientras que .s le permitiría aplicar algo de estilo solo a la letra S y así sucesivamente.