How to enter animated text in WordPress with JavaScript

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:

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.

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.

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. 😉