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
For example?
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:
To see this and another 965 code snippets of this website, login or subscribe here.
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 "WordPress"
and "OsomCode"
; but you can replace them with whatever you want.
2. Insert the JavaScript snippet
To animate the text you are going to use Javascript, so add the following code in the Body Scripts section of the Scripts metabox, located at the end of the post/page content.
To see this and another 965 code snippets of this website, login or subscribe here.
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:
To see this and another 965 code snippets of this website, login or subscribe here.
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.
Conclusions
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. 😉