Rodrigo Brito

Aprenda a realizar o efeito de maquina de escrever de maneira simplificada

Neste post vou demonstrar como é simples para implementar o efeito de máquina de escrever em uma frase qualquer em seu projeto utilizando o javaScript juntamento com um estilo em CSS.

O primeiro passo é escolher o texto que receberá este efeito, para podermos selecionarmos com o querySelector do JS. Estou utilizando como exemplo o meu próprio site, no elemento onde é apresentado o texto "FullStack PHP | Web Designer", na home.

Passo 1 - A escolha do elemento:

Neste elemento eu apliquei em uma classe chamada headline.

Passo 2 -O efeito em JavaScript:

Código do JS:

//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);

Para entender o código, a constante phrase(nome que eu escolhi) está selecionando a tag com a classe headline, através querySelector (método do objeto document). A tag selecionada será a tag "p" e todo o seu conteúdo entre a abertura e o fechamento desta tag. Esta seleção é passada como parâmetro para a função typeWrite(nome que escolhi também!!). Neste caso, com o querySelector, somente o primeiro elemento do DOM é selecionado. Se houver mais de um elemento em uma mesma pa?ina, utilize o método querySelectorAll. Para mais informações de seleção de elementos no DOM, clique aqui.

Esta função pega o parâmetro, agora como "e" passa para a constante textArray, utilizando o método método split (de String) sobre o método innerHTML (de Element, obtém a sintaxe HTML dos elementos descendentes). Este valor agora em textArray  é um array contento cada letra e espaço da tag selecionada.

Em seguida o elemento "e" que é a referência da tag "p", recebe dentro de si, com o médoto innerHTML um espaço, um texto vazio.

Em seguida é executo um forEach em textArray, que percorrerá seus elementos do array e para cada elemento (letter) no índice "i" e após o método setTimeOut(executa algo dado um período de tempo passado) vezes o índice, que definirá o tempo para cada elemento letra/espaço. O tempo definido foi 80 milissegundos. Pode ser passado qualquer valor e quanto maior, maior o intervalo entre o aparecimento dos elementos. Esta função tem como callback a adição do elemento letterao elemento e(p) que foi "esvaziado". A partir daí está pronto o efeito!!

Passo 3 - Efeito cursor piscando no CSS:

Eu não utilizei este efeito, pois julquei não aplicável ao meu layout. Em relação a tipografia, será de acordo com a identidade visual implementada. Para o efeito de cursor piscando, basta aplicar no CSS um conteúdo com um frame relacionado à classe ou id do elmento. No meu caso, tendo a classe headlinecomo alvo, ficou da seguinte forma:

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

@keyframes flash{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}