thiagolopes-dev · May 5, 2020 18:15 · May 5, 2020
diff --git a/efeito-maquina-de-escrever-com-javascript.markdown b/efeito-maquina-de-escrever-com-javascript.markdown
@@ -0,0 +1,7 @@
+Efeito Máquina de Escrever com JavaScript
+-----------------------------------------
+
+
+A [Pen](https://codepen.io/ReneSena/pen/VdXpXO) by [Rene Sena](https://codepen.io/ReneSena) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/ReneSena/pen/VdXpXO/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Efeito Máquina de Escrever</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body class="container">
+    <h1 class="titulo-principal">Efeito Máquina de Escrever com JavaScript, utilize em seus projetos esse efeito bacana!</h1>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+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);
diff --git a/style.css b/style.css
@@ -0,0 +1,26 @@
+.container{
+    background-color: #000;
+}
+.titulo-principal{
+    max-width: 480px;
+    text-align: center;
+    margin: 60px auto;
+    font-family:'Courier New', Courier, monospace;
+    color: #fff;
+}
+.titulo-principal:after{
+ content: '|';
+ margin-left: 5px;
+ opacity: 1;
+ animation: pisca .7s infinite;
+}
+/* Animação aplicada ao content referente a classe *.titulo-principal* resultando num efeito de cursor piscando. */
+
+@keyframes pisca{
+    0%, 100%{
+        opacity: 1;
+    }
+    50%{
+        opacity: 0;
+    }
+}