ARTICLE AD BOX
I'm trying to create a dynamic 'word processor/typewriter' effect on my webpages for specfic sections (code explanations).
I have created the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typerwriter Effect</title> <link rel="stylesheet" type="text/css" href="type.css"> </head> <body> <div class="wrapper"> <p>This is a typing test.</p> </div> </body> </html>and for the CSS:
.wrapper { height: 100vh; display: flex; place-items: center; } .wrapper p { font-family: monospace; border-right: 3px solid black; animation: typing 10s steps(22), blink 0.5s infinite step-end; white-space: nowrap; overflow: hidden; } @keyframes blink { 0%, 100% { border-color: transparent; } 50% { border-color: black; } } @keyframes typing { 0% { width: 0ch; } 100% { width: 22ch; } }Which is giving the correct effect. However, this only works if I count the characters in the Heading or Paragraph objects before I complete the CSS.
For the purposes of my site, where I will have many paragraphs of code that I want to show in this style, that would mean duplicating all this for every individual paragraph just because of the character count.
Is there any way to make this dynamic? Could I somehow use JavaScript to do a Query to get the length of characters and somehow inject this 'variable' into the CSS for each section as it appears in the viewport?
Any better ideas?
