Creating a typewriter effect with CSS can add a nostalgic and engaging touch to text elements on your website. This effect mimics the appearance of text being typed out as if by an old-fashioned typewriter, character by character. Let’s walk through how you can achieve this effect using CSS animations.
Step-by-Step Guide: Creating a Typewriter Effect With CSS
Start with a basic HTML structure for your typewriter text:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typewriter Effect</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="typewriter"> <h1>Welcome to My Website!</h1> </div> </body> </html> |
Next, create a CSS file (styles.css) to define the styles and animations:
---
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | /* styles.css */ .typewriter h1 { overflow: hidden; /* Ensures the text is not visible outside its container */ border-right: .15em solid orange; /* Cursor blinking effect */ white-space: nowrap; /* Keeps the text in one line */ margin: 0 auto; /* Centers the text container */ letter-spacing: .15em; /* Adjusts the spacing between characters */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } /* Typing animation */ @keyframes typing { from { width: 0; } to { width: 100%; } } /* Blinking cursor animation */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: orange; } } |
Here is live demonstration:
See the Pen
Typewritter effect CSS by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
.typewriter h1 selector targets the h1 element inside the .typewriter class div. It prepares the element for the typewriter effect by hiding overflow, creating a border that simulates a cursor, and setting up animations.
animation:typing 3.5s steps(40, end), blink-caret .75s step-end infinite;: This line applies two animations to the h1 element.
typing: Gradually reveals the text by increasing the width from 0 to 100% over 3.5 seconds.blink-caret: Creates a blinking cursor effect using CSS border-color.@keyframes typing: Defines the typing animation, which animates the width of the text container from 0 to 100%.
@keyframes blink-caret: Defines the blink-caret animation, which alternates the border color to simulate a blinking cursor.
Adjusting Timing and Styles
You can adjust the animation-duration values (3.5s for typing animation and .75s for cursor blinking) in the CSS to speed up or slow down the effect.
Modify letter-spacing, font-size, and other styles to fit your design preferences.
Testing and Fine-Tuning
Test the typewriter effect across different browsers and devices to ensure it functions as expected.
Fine-tune animations and styles based on feedback and desired visual impact.
Enhancements and Variations
Delay Effect: Add a delay before the typing animation starts using animation-delay.
Multiple Lines: Extend the effect to multiple lines by applying it to
or other block-level elements.
Accessibility Considerations
Ensure the typewriter effect is accessible by testing with screen readers and ensuring the text remains readable and understandable.
Typewriter Effect with jQuery
To create a typewriter effect using CSS @keyframes animations with the show() function in jQuery, you can achieve a similar effect as with pure CSS animations. Here’s how you can combine jQuery’s show() function with CSS animations to create the typewriter effect:
First, set up your HTML structure. Here’s a basic example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typewriter Effect with jQuery</title> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <div class="typewriter"> <h1 id="typewriter-text">Welcome to My Website!</h1> </div> </body> </html> |
Next, define your CSS styles in styles.css to create the typewriter effect:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* styles.css */ .typewriter h1 { overflow: hidden; border-right: .15em solid orange; /* Cursor blinking effect */ white-space: nowrap; margin: 0 auto; letter-spacing: .15em; } .typewriter h1.show { animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } /* Typing animation */ @keyframes typing { from { width: 0; } to { width: 100%; } } /* Blinking cursor animation */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: orange; } } |
Now, create a JavaScript file script.js to add the show() function and toggle the .show class to trigger the typewriter effect:
1 2 3 4 5 6 7 8 9 10 11 | // script.js $(document).ready(function() { // Hide the text initially $('#typewriter-text').hide(); // Show the text with typewriter effect $('#typewriter-text').show(function() { $(this).addClass('show'); }); }); |
Here is the result:
See the Pen
Typewritter effect CSS & Js by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
Conclusion
Implementing a typewriter effect with CSS adds a dynamic and engaging element to your website’s text content. By using CSS animations effectively, you can create an effect reminiscent of old typewriters, enhancing the user experience and adding visual interest to your web pages. Experiment with different styles and timings to achieve the desired effect that aligns with your website’s design and theme.
Also Read: How to Add a Verified Badge to WordPress Author Profile Using CSS
WordPress Highlighter Marker Effect Hyperlink With CSS
