Discover in this tutorial how to get part of a sentence written (and rewritten) with typewriter effect using code.
Do you want to apply the “typewriter effect” to animate a text?
As you know, OsomCode always discourages you from abusing these minimalist effects.
But, hey, I have to admit that the result is very eye-catching for slogans, headers or similar
Learn to develop with
Do you want to know how to get this typewritting effect?Here are the instructions:
Steps to create a typewriter effect
1. Add the content to an HTML block
First select an HTML block from the editor and add the following:
Place in the first part the fragment you want to keep fixed. In this case “Learn to develop with”.
Next, enter the words that you want to be written/rewritten in quotes. In this case they are
"OsomCode"; but you can replace them with whatever you want.
It should look something similar to this:
Only the last step remains.
3. Modify the style.css
To finish customizing the typewritting effect, insert the following code at the end of the style.css file:
You got it.
You can change the color and size of it. Basically, adapt it to your liking. 😉
For the elaboration of this tutorial I have taken as reference this fantastic CodePen by Simon Shahriveri.
Now you know how to give a personal and dynamic touch to a slogan or header by adding animated text with typewriter effect.
And remember, don’t abuse this type of effects. Use them only when they serve a purpose.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉