2

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.

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>

4
  • não entendi... você quer exibir como se o texto estivesse sendo digitado só com css, sem javascript? Commented 10/08/2020 às 13:33
  • O código que citei, já imprime parecido quando alguém está "digitando". A dúvida é pular linha. Se eu colocar um <br> ele imprime o <br>.
    – JeanAlves
    Commented 10/08/2020 às 13:45
  • apresente a parte do javascript também Commented 10/08/2020 às 13:58
  • Editei, perdão. Esqueci dessa parte. Javascript está acima
    – JeanAlves
    Commented 10/08/2020 às 14:03

3 Respostas 3

2

Ou você pode substuir o <br> por \n e alterar o innerText ao invés do innerHtml. Assim você não precisa restringir por tamanho e pode aproveitar para aplicar o efeito em outros lugares e com mais quebras de linha.

function typeWrite(elemento){
    let texto = elemento.innerHTML.replace('<br>', '\n');
    let textoArray = texto.split('');
    elemento.innerHTML = ' ';
    textoArray.forEach(function(letra, i){   
      
    setTimeout(function(){
        elemento.innerText += 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>

1
  • Cara muito bom, e nem precisou de regex como eu imaginava!
    – hugocsl
    Commented 10/08/2020 às 14:51
1

Só complementando as respostas já existentes aqui, eu aconselho a utilizar regex, pq desta maneira consegue manipular melhor o texto, por exemplo, se precisar ter mais de uma tag <br> dentro do mesmo parágrafo, tbm pode aproveitar para ver as diferenças entre innerHTML e innerText :

const titulo = document.querySelector('.titulo-principal');

function typeWrite(elemento) {
  const textos = elemento.innerText;
  const regex = /<br>/g;                           // todas tags <br> no texto
  const texto = textos.replace(regex, '\n')        // substitui os br's por \n
  const textoArray = texto.split('');
  elemento.innerText = ' ';
  
  textoArray.forEach(function(letra, i) {
    setTimeout(function() {
      elemento.innerText += letra;
    }, 75 * i)

  });
}

typeWrite(titulo);
.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 certo <br> Meu Texto mais um <br> Testando Javascript</p>

2
  • 1
    Boa! tinha esquecido da limitção do replace() no javascript Commented 10/08/2020 às 17:36
  • Deixei só para exemplo mesmo com uma regular simples, mas, se for ter apenas um <br> no parágrafo, o seu exemplo já satisfaz!
    – LeAndrade
    Commented 10/08/2020 às 17:51
1

Cara vc pode simplesmente limitar a largura do <p> em 10ch (ch é uma medida equivalente a o caractere 0, ou seja, 10ch tem a largura de dez caracteres 0, tipo 0000000000)

inserir a descrição da imagem aqui

Com isso vc quebra a linha exatamente depois de 10 caracteres, que é onde vc colocou o <br>. Sei que não é dinâmico e tão precisa, mas nesse caso funciona. Para vc "ignorar" esse <br> no meio do texto acho que só com regex, mas ai não é minha especialidade...

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 {
  width: 10ch;
}

.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 Meu Texto</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .