Animated heading

An animated heading is pretty cool in a banner. Here is how it's done.

Prepare the files

Download the files and enqueue them :

Animate.css : https://daneden.github.io/animate.css/
Morphext : https://morphext.fyianlai.com/
Typed.js : https://github.com/mattboldt/typed.js

/* load the CSS files in the head */
wp_enqueue_style( 'animate', plugin_dir_url( __FILE__ ) . 'assets/css/animate.min.css' );
wp_enqueue_style( 'morphext', plugin_dir_url( __FILE__ ) . 'assets/css/morphext.css' );

/* load the JS files in the footer */
wp_enqueue_script( 'morphext-js', plugin_dir_url( __FILE__ ) . 'assets/js/morphext.min.js', array('jquery'),'', true );
wp_enqueue_script( 'typed-js', plugin_dir_url( __FILE__ ) . 'assets/js/typed.min.js', '','', true );

We don't necessarily need to load all the files. Morphext and Animate have to be used together. And Typed.js is only for the typing effect.

Animate with Morphext

In a Rich Text element, add your heading, with your own class :

I am a <span class="headingfx1">So Simple, Very Doge, Much Wow, Such Cool</span> Text Rotator

Now in a Code Block, add this javascript, with the same class you used for the heading :

(function($) {

    $(".headingfx1").Morphext({
        animation: "bounceIn",
        separator: ",",
        speed: 2000
    });

}(jQuery));

As you can see, we can easily change the animation and the speed.
For other animations, check at the bottom of this page : https://morphext.fyianlai.com/

Here is another example :

Animate with Typed.js

Once again, we use our own class :

oxygen is <span class="typefx1"></span>

And the function is a bit different, as it comes from a different javascript library. But it's also easy to understand :

var typed = new Typed(".typefx1", {
    strings: ["awesome", "great", "beautiful", "amazing"],
    smartBackspace: true,
    typeSpeed: 50,
    backSpeed: 50,
    loop: true
});

As usual, you can find more information in the official page : https://github.com/mattboldt/typed.js

Then you just have to add some style in CSS to make it look better.

Here is the complete code of all the animated heading in this page :