Last active
October 4, 2023 18:57
-
-
Save ryanpcmcquen/4504444fb15df52f24e71efd0bb7a13b to your computer and use it in GitHub Desktop.
Old school typing with new school code.
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
| .input { | |
| display: none; | |
| } | |
| .output { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #000000; | |
| font-family: monospace; | |
| font-size: 105%; | |
| height: 5vh; | |
| } | |
| .output::after { | |
| content: "|"; | |
| font-size: 110%; | |
| top: -1px; | |
| position: relative; | |
| animation: blink 0.6s steps(3, start) infinite; | |
| } | |
| @keyframes blink { | |
| to { | |
| visibility: hidden; | |
| } | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" type="text/css" href="typewriter.css"> | |
| </head> | |
| <body> | |
| <div> | |
| <span class="input"> | |
| What up dog? | |
| </span> | |
| <span class="output"></span> | |
| </div> | |
| <script src="typewriter.js"></script> | |
| </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
| document.addEventListener('DOMContentLoaded', () => { | |
| const typeWriter = (obj) => { | |
| const firstIndex = obj.firstIndex | |
| const speed = obj.speed | |
| const inputElem = obj.inputElem | |
| const outputElem = obj.outputElem | |
| const input = document.querySelector(inputElem).textContent | |
| const outputNode = document.querySelector(outputElem) | |
| if (firstIndex === 0) { | |
| outputNode.textContent = '' | |
| } else { | |
| outputNode.textContent += input.charAt(firstIndex) | |
| } | |
| window.setTimeout(() => { | |
| if (firstIndex < input.length - 1) { | |
| typeWriter({ | |
| firstIndex: firstIndex + 1, | |
| speed: speed, | |
| inputElem: inputElem, | |
| outputElem: outputElem | |
| }) | |
| } else { | |
| typeWriter({ | |
| firstIndex: 0, | |
| speed: speed, | |
| inputElem: inputElem, | |
| outputElem: outputElem | |
| }) | |
| } | |
| }, speed) | |
| } | |
| typeWriter({ | |
| firstIndex: 0, | |
| speed: 75, | |
| inputElem: ".input", | |
| outputElem: ".output" | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment