A Pen by Daniel groen on CodePen.
Created
January 9, 2022 23:59
-
-
Save EnterTheVoid-x86/2cc61d4824d2c4b561e2247ae4c307bc to your computer and use it in GitHub Desktop.
CSS typewriter
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
| <h1>Hallo, Wij zijn Codefield!</h1> |
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',function(event){ | |
| // array with texts to type in typewriter | |
| var dataText = [ "Utrecht.", "Full Service.", "Webdevelopment.", "Wij zijn Codefield!"]; | |
| // type one text in the typwriter | |
| // keeps calling itself until the text is finished | |
| function typeWriter(text, i, fnCallback) { | |
| // chekc if text isn't finished yet | |
| if (i < (text.length)) { | |
| // add next character to h1 | |
| document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>'; | |
| // wait for a while and call this function again for next character | |
| setTimeout(function() { | |
| typeWriter(text, i + 1, fnCallback) | |
| }, 100); | |
| } | |
| // text finished, call callback if there is a callback function | |
| else if (typeof fnCallback == 'function') { | |
| // call callback after timeout | |
| setTimeout(fnCallback, 700); | |
| } | |
| } | |
| // start a typewriter animation for a text in the dataText array | |
| function StartTextAnimation(i) { | |
| if (typeof dataText[i] == 'undefined'){ | |
| setTimeout(function() { | |
| StartTextAnimation(0); | |
| }, 20000); | |
| } | |
| // check if dataText[i] exists | |
| if (i < dataText[i].length) { | |
| // text exists! start typewriter animation | |
| typeWriter(dataText[i], 0, function(){ | |
| // after callback (and whole text has been animated), start next text | |
| StartTextAnimation(i + 1); | |
| }); | |
| } | |
| } | |
| // start the text animation | |
| StartTextAnimation(0); | |
| }); |
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
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> |
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
| body { | |
| background-color: #120439; | |
| height: 100%; | |
| font-family: 'tradegothiclt-bold', sans-serif; | |
| } | |
| h1 { | |
| font-size: 5em; | |
| color: white; | |
| text-transform: uppercase; | |
| } | |
| span { | |
| border-right: .05em solid; | |
| animation: caret 1s steps(1) infinite; | |
| } | |
| @keyframes caret { | |
| 50% { | |
| border-color: transparent; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment