Created
March 7, 2020 17:42
-
-
Save AlexGalhardo/6e671fef5ddd1c011076dce1b2248d2c to your computer and use it in GitHub Desktop.
Efeito Máquina de Escrever com JavaScript
This file contains hidden or 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 hidden or 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 hidden or 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