Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Welcome to the last part of this series on how to create an animated HTML5 logo for your blog.
Hopefully you’ve finished your animated logo and are now ready to integrate it into your WordPress blog. (You should have finished it – you had half a year to do so 😉 )
This post will be on

  • how to improve the stability of our code
  • some cross browser considerations
  • we will introduce a multi purpose animator class

and finally go live with our logo!

Refactoring – The Stickman Class

Until now, the stickman lived in a sandbox. Since we are going to integrate our logo in a site with way more scripts, tags, browsers and stuff, we have to ensure that the functionality of the site is not limited by our logo and vice versa. For this reason we will start with creating a new file logo.js and encapsulate the code, needed to draw the logo, in its own dedicated class:

The Animator Class

In the next step, we will write a really handy and generic animation class:

What this class does is to call an update function for a given duration and with a certain speed (in FPS). It uses the requestAnimationFrame API for the animation as we discussed in the last post. We can pass this animator our own functions with a simple call to animate(myFunc). All of our functions will then be called within the animation loop!

Putting Things Together

Animating a logo is now really straightforward:

Cross Browser Considerations

Even if everything just works fine in our sandbox, with our browser, we should consider, that our blog will be visited from all kinds of devices and browsers.
The requestAnimationFrame and the mentioned “bind” function are quite “new”( 😉 ) concepts and a lot of browsers are still lacking these features. For this reason we should include polyfills to guarantee that our code will use the available features or make a gracefull degradatation instead of just crashing.

The last thing we have to ensure is that our code is called once and only once as soon as the page load finished.
Normally one would do this e.g. by using $(init) in jQuery. But since we refrain from dependencies to additional frameworks we have to use the features availale on board:

To play safe we will have to remove this listener at the beginning of the init function to avoid it from being called multiple times:

WordPress Integration

We are almost there! Now it is getting serious. But before we will upload our code and present it to the world we have to make some more minor changes:

Finally, upload your script to the server and add this line to the header.php of your child theme:

That’s it! I hope you’ll have fun with your new animated logo! If you already have an animated logo or just created one leave me a comment 😉

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.