Animated Headers

This demonstration page was inspired by the demos on Codrops.

Scroll down to see the “Main” content of the page.

OMG — What is Going on Here?

First, from a graphic design perspective, you will notice that the page opens “full screen” with an animated photograph. That top section is considered the <header> of the page. The size is controlled by making the height 100% (which only works if you make all the containing objects also 100%, in this case <html> and <body>). The background-size property is then set to “cover”.

Scrolling down you see the main body of the page. If you scroll so the header is no longer visible, the animation stops running in the background. The animation is handled via the <canvas> element. Canvas works by clearing the screen and then re-drawing it 60 times per second — the viewer is given the illusion of movement.

Programming the <canvas> element

Overview

As you noticed, the little circles fly around like insects or bees.

There are two (nearly) constantly running loops. The first one, which is required, is the “requestAnimationFrame” loop. See function animate(). The second loop is only used by this particular animation because the bees change direction as they fly around, this is what I’m calling legs of the journey. These two loops are not explicity in sync with each other (maybe they are, but I didn’t do anything special to sync them.)

I created a class, “Bee” to hold the instance information for each bee — the basic data needed to draw or create each bee, such as x and y position, size, and opacity.

Canvas

The actual <canvas> related code is actually very minimal. The dimensions of the canvas is set when the page is first intialized (via initHeader();) and everytime the size of the screen is changed.