Olá André, tudo bem com você?
Acredito que nesse caso não queremos fazer um loop, o objetivo principal é controlar bem as nossas estruturas:
- Array de Palavras
- ìndice da palavra
Então, vou deixar aqui um exemplo bem simples
<body>
<div class="home container">
<p>Rogério Ceni: <span class="home__skills"></span> <span class="home__cursor"> </span></p>
</div>
<script src="index.js"></script>
</body>
Html vai ter só a frase dinâmica a ser inserida e um cursor, o css eu vou deixar no final do post
Agora no javascript o que precisamos é simplesmente coordenar o conteúdo em pausas, então iremos utilizar o setTimeout
const skills = [
"Goleiro",
"Treinador",
"Artilheiro",
"Campeão Mundial"
]
const skillSpan = document.querySelector('.home__skills');
const typingDelayInMS = 300;
const erasingDelayInMS = 150;
const nextTextDelayInMS = 2000;
let skillIndex = 0;
let textCharIndex = 0;
`
Uma definição básica, o array de palavras, variáveis para controlar o tempo, e duas de controle do índice do array e índice da palavra
const type = () => {
if(textCharIndex < skills[skillIndex].length){
skillSpan.textContent += skills[skillIndex].charAt(textCharIndex);
textCharIndex++;
setTimeout(type, typingDelayInMS)
} else {
erase()
}
}
`
Essa é a função báisca, eu vou primeiro checar se a palavra acabou, caso não irei colocar dentro do span o conteúdo atual dele, mais a posição no indice atual da palavra, irei incrementar o índice para na próxima vez, e adiciono um cronometro para esperar alguns segundos e reinvocar a mesma função
Caso já tenha acabado a palavra irei pedir para limpar:
const erase = () => {
if(textCharIndex > 0){
skillSpan.textContent = skills[skillIndex].substring(0, textCharIndex--)
setTimeout(erase, erasingDelayInMS)
} else {
changeWord()
}
}
Aqui eu vou sempre verificar o tamanho do indice, para quando for igual a 0, eu trocar a palavra, e a lógica é a mesma, só que ao invés de concatenar o texto atual, eu vou trocar pela substring, removendo de 1 palavra em 1
E quando chega a 0 eu posso simplesmente pedir para mudar a palavra:
const changeWord = () => {
textCharIndex = 0;
skillIndex++;
skillSpan.textContent = "";
if(skillIndex > skills.length - 1)
skillIndex = 0;
setTimeout(type, nextTextDelayInMS)
}
Aumento o índice do array, e zero o do carácter, e faço a verificação se já terminou o array de palavras, e após isso eu chamo a função type para começar tudo de novo :)
Agora podemos colocar no final do arquivo:
type()
// Ou para trabalhar com os eventos da DOM
document.addEventListener("DOMContentLoaded", () => setTimeout(type, 1000))
Então aqui a lógica é a mesma das primeiras aulas de lógica de programação, um loop é muito rapido para o que queremos trabalhar, na verdade queremos uma espécie de "recursão" utilizando temporizadores
Conseguiu Compreender?
Abraços e Bons Estudos!
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #0a0a0a;
color: #eee;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container > p {
font-size: 2.5rem;
text-align: center;
letter-spacing: 1px;
}
.home__skills {
color: #ff1e1e;
font-style: italic;
}
.home__cursor{
display: inline-block;
width: 3px;
background-color: rgba(226, 0, 0, 1);
margin-left: 0.25rem;
animation: blink 1s infinite;
}
.home__cursor.--animation-stop {
animation: none;
}
@keyframes blink {
60% {
background-color: rgba(226, 0, 0, 0.25);
}
89% {
background-color: rgba(226, 0, 0, 0.7);
}
100% {
background-color: rgba(226, 0, 0, 1);
}
}
