Some years ago I worked at a startup and we had this nice banner with a typewriter effect. I don't remember entirely what the banner was saying - but it was quite fun working on this one.
After all, having a nice flashy banner might come in handy for a landing page for you too one day, so I thought we might as well try and implement one today.
Typewriter Effect: requirements and recipe
As a user I want to see a message slowly appear on the screen letter-by-letter so that I can truly appreciate it
Let's start with an example from a great movie, I hope you've seen it:
Of course, you don't need to recreate this exact animation or use the iconic green on black colour palette, but there are some requirements:
Requirements
- Letters should appear one-by-one with a set interval
- Contrast ratio should be sufficient
- There should be accessible label with the whole phrase
- There shouldn't be any layout shifts throughout the whole animation cycle
Recipe
- Start with a static text: style it however you want
- Ensure that it's accessible
- Write a function that would type the sentence for you
- Choose an interval that feels right
- Follow the white rabbit...
Hints
To avoid layout shifts set the size of the "display" to a fixed value - this way it won't accidentally grow when more text is added.
There are several ways to achieve the typewriter effect, the simplest one is to split the phrase into individual letters and add them one by one to the screen, however it's also possible to do it with pure CSS.
Hard Mode: Vertical Scrolling Text
For this one you definitely need to have watched Matrix at least once and owning a pair of round glasses and a black coat is a nice to have.
How about implementing this effect:
Looks cool and fun to code both on terminal and in the browser: either can be coloured, erased and repainted ;-)
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (0)