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

I was very inspired by the amazing Google Doodles and decided to create my own animated HTML5 logo. There is an older post on how Google creates its Doodles on HTML5 Rocks: http://www.html5rocks.com/en/tutorials/doodles/lem/
In this post, Marcin Wichary explains some really helpful and advanced animation concepts and if you are interested in this stuff you should definitely read it. Unfortunately, I discovered this post just, when I had finished my own series. You will see that even the complexity of my “stupid” stickman logo is incredible. The Stanislaw Lem Doodle e.g. has 17,000(!) lines of JavaScript code and its own engine! Anyways..

This will be a beginners series about animating the WordPress header/logo. I will try to keep it simple but informative.
One thing in advance: please use the described techniques carefully and ensure that visitors are not annoyed (I’m not a good example – I don’t care about my visitors 😉 )

We will not use jQuery or any other framework. Everything will be written in pure JavaScript. The only HTML we will produce is a HTML5 canvas tag. It should be no problem, if you’re not familiar with canvas and HTML5 technologies. However, if you do not know much about it, I promise that there is a lot you can learn in this series. The template for this series is the current standard WordPress theme which is “Twenty Thirteen” and my own (super creative) stickman logo.

List of contents:

I – Scaffolding & HTML5 Canvas Logo
a) Create a local Page Dummy
b) Dynamic Creation of the Canvas
c) Draw to Canvas (from graphics editor to code)
d) Overlay the Logo and make Adjustments

II – Animations: The Stickman comes to Live
e) Animation Now and Then
f) A simple Animation
g) Time Controlled Animations

III
h) Make it responsive
i)  Make it cross browser
j) OO
k) Going live: WordPress Integration

Intro

As far as I know there are only a few blogs and companies (except Google!) out there having an animated logo. If we now draw from these all the Gif, Flash,… logos there remains maybe a (perceived) hand full of animated HTML5 logos. And the reason for this is simple: logo design is hard enough, creating animations is time-consuming and delicate. To deal with different browsers, devices, tastes, .. doesn’t make it better.

I’ve found one additional example which should be quite famous. The “meru” logo is animated subtle and stylish and it even responds to mouse movements and touch:
meru See it in action on http://meru.ca/

An animated logo like this gives the impression of an innovative, dynamic and smart company.
In most cases, however, it is easier for an animated logo to be disturbing to visitors so be cautious.

Let’s start with our logo!
Note: code annotations will follow. This is work in progress.

A) Create a local Page Dummy

First, we need a local test environment. So create a new folder for your logo.
Create an index.html which looks like this:

P1-P3 are used as markers for code insertions.

Next, copy the header from your WordPress:
copy_header
I used the Chrome Developer Tools and only copied the relevant part of my page markup (which can be a little bit error prone regarding CSS rules). Paste the clipboard to “P1” right into your index.html.

The copied markup has no styling yet so let’s fix this. In the above screenshot you see the relevant (CSS) styling rules on the right side. They have references to the files in which the layout is described. For the sake of simplicity I copied the whole site.css file and the page.css. Save these files to your local logo folder (click on link -> right click -> save as). Add references to the stylesheets into your index.html by adding the following line to “P2”:

The last step is to create a script tag containing our JavaScript:

Paste this snippet to “P3” and you’re done with the scaffolding and ready to code!

B) Dynamic Creation of the Canvas

Ok, we’ve set everything up and now it is time to write the code. The first thing we will do is to create our canvas element and insert it into the DOM.
For this purpose we define a “init” function which is called as soon as the document loaded and the browser is ready to operate on the DOM.

Now we need a mechanism that calls the function at the right time:

After inserting everything in the script tag the result looks like this:

step2_screen

C) Draw to Canvas

(from graphics editor to code)

We are now ready to make our first brushstroke. But actually, we have already drawn a rectangle. It is just that simple.
Everytime we want to draw something we use the API of the context object. This API provides us with all the relevant methods to build complex graphics.

But before we go, we need some input for the canvas. I made my logo within 5 minutes in Adobe Fireworks which is completely overexaggerated for this task but I love this tool (paint would have done a great job too). However, it is a good idea to create your logo first with a vector graphics editor like Illustrator or Inkscape(free).

fireworks to canvas

If you created your logo with such a graphics editor the paths are relatively easy to “translate” to code:

After you’ve defined all relevant functions call them in your init function:

The result will look like this:

after step3

D) Overlay the Logo and make Adjustments

overlayed

To overlay the WordPress logo you have to position the canvas tag in the following way:

Change the background to rgba to make it transparent like so:

For some reason there was a shift by approximately 10 pixels between the graphics editor and canvas. After adjusting everything the result looks like this:

after adjust

After the positioning the final step is to style it in the same way and make it “pixel perfect”:

after width and color adjust

The dashed laser beam can be created by adding a leading

For some reason, only the first beam was painted with dashes which is maybe caused by a browser bug. But I don’t mind since it will be replaced anyhow by a “fancy” animation in the next part of this series.
Update:It was my fault. I had an incorrect closePath() between the respective drawing statements which reset the setLineDash. Which is maybe an unwanted behaviour anyhow.

after dashed and last adjustments

That’s it for now. Stay tuned and please feel free to leave feedback!

To learn more about the fantastic HTML5 canvas take a look to the canvas specification

2 thoughts on “Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)

    1. Hi Tarun,
      thank you for your feedback. I would always prefer SVG animation over Canvas+JS when it comes to simple logo design. So, I think you’re doing a great job! However, as things are getting more complicated, a canvas can be the right tool for the job. The canvas is really ‘bare’ so the developer has to write a lot of code around it to achieve the desired functionalities and to make it cross-browser, and stable. The reward is the high flexibility and the capability to implement small things such as logos and big big projects like games.

      Greetings
      Philipp

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.