• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

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:

To see this and another 839 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 839 code snippets of this website, login or subscribe here.

It should look something similar to this:

Add the Javascript code in the Genesis Framework scripts section
Add the Javascript code in the Genesis Framework scripts section.

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

CSS Genesis Framework HTML Javascript WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?