1

Fiz um efeito máquina de escrever com jquery, e preciso que esse efeito pegue todos os parágrafos. Dessa maneira que eu fiz ele aplica o efeito somente ao primeiro parágrafo. Segue código para análise. Alguém consegue me ajudar? Obrigado desde já.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maquina de escrever</title>

    <style>
        body {
            background: #0e1013;
        }
        p{
            max-width: 480px;
            text-align: center;
            margin: 68px auto;
            color: #fff;

        }
    </style>


</head>
<body>
<p>Texto1 - typewriter</p>
<p>Texto1</p>
<p>Texto1</p>



    <script>



    function typeWriter(elemento) {
        const textoArray = elemento.innerHTML.split('');
        elemento.innerHTML = '';
        console.log(textoArray);
        textoArray.forEach((letra, i)=> {
            setTimeout(() => {
                elemento.innerHTML += letra
            }, 95*i)
        });
    }


        const titulo = document.querySelector('p');
        typeWriter(titulo);
    </script>
</body>
</html> 
3
  • Esse código não é jQuery.
    – Sam
    Commented 9/10/2019 às 18:56
  • sam, desculpa estava com jquery na cabeça na hora de escrever a pergunta, nem percebi. Commented 9/10/2019 às 19:20
  • Se vc tiver usando jQuery, posso colocar uma sugestão nesse formato.
    – Sam
    Commented 9/10/2019 às 19:21

3 Respostas 3

3

O problema é que você está utilizando a função querySelector e, como é possível ver na documentação, ela retorna apenas o primeiro elemento encontrado. Para corrigir isso é necessário alterar para querySelectorAll e convertê-lo para um array e, então, iterar sobre cada parágrafo. Segue exemplo do código:

function typeWriter(elemento) {
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = '';
    textoArray.forEach((letra, i)=> {
        setTimeout(() => {
            elemento.innerHTML += letra
        }, 95*i)
    });
}


const titulo = document.querySelectorAll('p');
Array.from(titulo).forEach(typeWriter);
<html lang="en">
    <body>
        <p>Texto1 - typewriter</p>
        <p>Texto2</p>
        <p>Texto3</p>
    </body>
</html> 

3

Tem que pegar todos os p, para isso vc pode usar o querySelectorAll e depois fazer um forEach

function typeWriter(elemento) {
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = '';
    textoArray.forEach((letra, i) => {
        setTimeout(() => {
            elemento.innerHTML += letra
        }, 95 * i)
    });
}

let p = document.querySelectorAll('p')

p.forEach((e) => {
    typeWriter(e)
})
body {
    background: #0e1013;
}

p {
    max-width: 480px;
    text-align: center;
    margin: 68px auto;
    color: #fff;

}
<p>Texto1 - typewriter</p>
<p>Texto1</p>
<p>Texto1</p>

-1

Segue um código simples abaixo em JS puro (super simples)!

Coloquei um passo a passo no seguinte link: https://www.rodrigobrito.dev.br/blog/js-e01-efeito-maquina-de-escrever-com-javascript

//EFEITO MÁQUINA DE ESCREVER

function typeWrite(e) {
    const textoArray = e.innerHTML.split('');
    e.innerHTML = ' ';
    textoArray.forEach(function (letter, i) {
        setTimeout(function () {
            e.innerHTML += letter;
        }, 80 * i);
    });
}

const phrase = document.querySelector('.headline');

typeWrite(phrase);
.headline:after{
     content: '|';
    margin-left: 5px;
    opacity: 1;
    animation: flash .7s infinite;
}

@keyframes flash{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}
<p class="headline">Efeito máquina de escrever</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 .