Estou com uma tremenda dificuldade, fiz uma pequena frescura para quando entrar no site o texto mostre igual quando digita sozinho com keyframe.
Dúvida:
Como posso pular linha no meu texto sem que o keyframe também leia, por exemplo "
", ou seja o texto sairia assim: "meu texto 'br>meu texto |" tudo junto e com o tag br.
Obrigado!
HTML:
<p class="titulo-principal">Meu texto br> Meu Texto</p>
Valor imprimido: Meu Texto br> Meu texto |
CSS:
.titulo-principal{
}
.titulo-principal:after{
content: '|';
margin-left: 5px;
opacity: 1;
animation: pisca .7s infinite;
}
@keyframes pisca{
0%, 100%{
opacity: 1;
}
50%{
opacity: 0;
}
}
Javascript:
function typeWrite(elemento){
const textoArray = elemento.innerHTML.split('');
elemento.innerHTML = ' ';
textoArray.forEach(function(letra, i){
setTimeout(function(){
elemento.innerHTML += letra;
}, 75 * i)
});
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);
.titulo-principal{
}
.titulo-principal:after{
content: '|';
margin-left: 5px;
opacity: 1;
animation: pisca .7s infinite;
}
@keyframes pisca{
0%, 100%{
opacity: 1;
}
50%{
opacity: 0;
}
}
<p class="titulo-principal">Meu texto br> Meu Texto</p>
function typeWrite(elemento){
const textoArray = elemento.innerHTML.split('');
elemento.innerHTML = ' ';
textoArray.forEach(function(letra, i){
setTimeout(function(){
elemento.innerHTML += letra;
}, 75 * i)
});
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);