Created
May 5, 2020 18:15
-
-
Save thiagolopes-dev/097a4c6470c96a3ca63d4d111243dea4 to your computer and use it in GitHub Desktop.
Efeito Máquina de Escrever com JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment