Estoy tratando de obtener un efecto de ciclo/bucle en 3 elementos H1, mostrando un color de fuente púrpura para cada H1 durante algunos segundos y luego cambio a otro H1 justo debajo del primero.
Quería que este efecto fuera infinito y pensé en usar for loop y setInterval pero estoy llegando a alguna parte.
setInterval(changeColorLoop(), 2000); function changeColorLoop() { const titleArtArray = document.querySelectorAll(".art-text"); for (var i = 0; i < titleArtArray.length; i++) { titleArtArray[i].classList.toggle = ".purple"; } } <div class="art-column"> <h1 class="art-text">Think</h1> <h1 class="art-text">Design</h1> <h1 class="art-text">Code</h1> </div> .purple { color: purple; }Esto pone en marcha la "animación". Necesita un poco de pulido. Editar: Pulido, gracias a @jeanjacquesgourdin. Edición 2: se agregó algo de transición CSS
let index = 0; function changeColorLoop() { const titleArtArray = document.querySelectorAll(".art-text"); titleArtArray[index % 3].classList.toggle("purple"); titleArtArray[(index + 1) % 3].classList.toggle("purple"); index++ } setInterval(changeColorLoop, 1000); .art-text { transition: all 1000ms ease-in-out; } .purple { color: purple; } <div class="art-column"> <h1 class="art-text purple">Think</h1> <h1 class="art-text">Design</h1> <h1 class="art-text">Code</h1> </div>Si te entiendo bien puedes hacer algo como
let index = 0; const titleArtArray = document.querySelectorAll(".art-text"); setInterval(()=>{ titleArtArray[index].classList.toggle = ".purple"; titleArtArray[index+1].classList.toggle = ".purple"; index = (index + 1) % 3 }, 2000); <div class="art-column"> <h1 class="art-text purple">Think</h1> <h1 class="art-text">Design</h1> <h1 class="art-text">Code</h1> </div>Puedes hacer lo siguiente:
<script> setInterval(() => { const titleArtArray = document.querySelectorAll(".art-text"); titleArtArray[0].classList.add("purple"); setTimeout(() => { titleArtArray[0].classList.remove("purple"); titleArtArray[1].classList.add("purple"); setTimeout(() => { titleArtArray[1].classList.remove("purple"); titleArtArray[2].classList.add("purple"); setTimeout(() => { titleArtArray[2].classList.remove("purple"); }, 500); }, 500); }, 500); }, 2000); </script> <div class="art-column"> <h1 class="art-text">Think</h1> <h1 class="art-text">Design</h1> <h1 class="art-text">Code</h1> </div> <style> .purple { color: purple; } </style>