Floating Code for a Site Header or Something

Edit: The Codepen embed above was on a static page on this site, before abandoning it to a folder on my computer. I’ve tossed it into a pen to preserve it and updated this post a little. Modernizr is no longer used in the example.

Above you’ll see some code floating around in a banner. It’s something I tossed together over a weekend to use as a banner for this site. The general idea was to duplicate the first animation exercise I ever did, which was to make a square move across the screen and wrap at the end.

Pretty basic, but what if I did it with text? And what if I  used the new HTML 5 canvas to do it? Just in case you’re looking at this post after I’ve moved on to something else in the header.

Looking back, it might have been just as easy to move text boxes in the DOM, and it was a good opportunity to try out CSS3 animation… but I haven’t done any canvas stuff in a while and I sort of wanted to play with the text. Besides, there were a few things I wanted to play with. Like measuring the width of a string on the canvas and basing a position upon that information.

The canvas is a bit tricky with telling you the width of a block of text, and it won’t tell you the height, so I’m interested to check this out from other computers and other browsers. Courier New on my machine is not necessarily the same as Courier New on your machine… so will the measurements be off from computer to computer? Probably. But maybe I can adjust for it.

On the whole, it’s pretty simple. The script checks with Modernizr for canvas support, and starts off if things are okay. Then it uses jQuery to see if the parent of the canvas is visible. If so, it draws the canvas. This doesn’t matter much on the test page, but on this site the header gets hidden if the window is too small for it.

Although I wanted to keep requesting animation frames in case the window got bigger again, I didn’t want to draw things that the user couldn’t see. So it just sits and quietly counts until it’s parent (the main header) is visible again before updating and drawing anything.

For those without canvas support, there is no content inside the canvas. It should just sit there empty and transparent if you’re using some goofy browser without modern features. And if Modernizr puts the no-canvas class on the html tag, then they get a nice jpg background. For modern browsers, the CSS gives you a white background and renders the canvas. To make the whole thing fit, it’s absolutely positioned and the parent is set to overflow:hidden. This allows it to keep moving without busting out of the layout.

Lastly, there’s the super-nifty method I used to programmatically add and arrange the text… um… yeah, about that…

I just eyeballed it. I did base some measurements on the text width, but in the end I just created an object with the text values I wanted, put them into animation objects and added them to an array to be updated. It’s not what I would do for a big company, but it works for little bells and whistles like this.