Floating Code for the Header

Update: The floating code at the top is now powered by CSS3 instead of JavaScript. No canvas required.

At the time of this writing, there’s a bunch of floating code in the header of my website. It’s brand new and kind of light, meaning that I tossed it together during the weekend. But it’s still a nifty animation. The general idea is 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, here’s a link to a test. The Javascript isn’t minified there, so you can see the source code.

Update: I’ve updated this thing to use an image sprite. I have a demo for that as well.

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 eye-balled 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.

Same Day, After Some Testing at work

The text looks a bit jumpy on the PC at work today, even though it was using Chrome. This makes me think that maybe I shouldn’t be animating text in quite this way. I think I’ll make a sprite and load an image of the text instead.

Also, it occurred to me that my CSS, while clever, has a big flaw. Browsers might load that backup image even when it’s not used. If I really want to use it as a backup without loading it where it isn’t needed, (especially on mobile devices) then maybe I should set the background image conditionally in JavaScript. I’m testing with for canvas with Modernizr anyway, so I can just load the background image if that fails.

I’ll leave things as-is for the moment, but it will be updated to a sprite-based animation within the week. I’ll keep that test page, though.

Switching to an Image Sprite

I finally did switch it up. (There’s a link to the image link demo at the top of this post.) I like the look of things, but I’m still not happy with the programming. I figured that I would spend too much time working out a dynamic way to get the results I wanted, but in the end I spent just as much time eye-balling things again. Let that be a lesson to all of us, kids.