Efeito de Digitando com JavaScript

Sabe aquele efeito do texto digitando, vamos ver como criar ele com JavaScript?

Arquivo em html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <title>Efeito de escrevendo em JS</title>
</head>

<body>
    <div class="container">
        <span id="text"></span>
        <span class="bar">|</span>
    </div>
    <script src="script.js"></script>
</body>

</html>

Arquivo de CSS

*{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    background-color: black;
}

html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

#text {
    font-size: 20;
    color: white;
}

.bar {
    animation: animate 0.5s infinite linear;
}

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

Arquivo em JavaScript


let i = 0;
let message = "Aqui vai o texto que você quer animar com a escrita. Tutorial do @sujeitoprogramador";

typing();

function typing(){
    if (i < message.length){
        document.getElementById('text').innerHTML += message.charAt(i);
        i++;
        setTimeout(typing, 100);
    }
}

Segue o link para copiar do github, fique a vontade, use com moderação

https://github.com/gugahb/efeito-digitando-js

esse tutorial eu vi no @sujeitoprogramador no Instagram

Head of Development & Project Manager IT | Scrum Master | Product Owner / Especialista em projetos de sites, aplicativos e sistemas de TI.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *