Time Visualizations: MooTools Scrubber
Sometimes static data is not sufficient to portray information changes over time. For example, you need to show population growth in the United States. You could just have four separate images depicting concentrations from sequential decades. A more interactive approach, would be to use a slider to toggle between the separate graphics. In audio and video editing, this slider is called a scrub bar. Here's how to set one up using a simple MooTools 1.2 script that I call The Scrubber.
Check out the demo or download the project files.
Note: This demo is written using MooTools 1.2.
In a nutshell, all we're doing is overlaying images using absolute positioning, and setting their opacity to zero. Using the MooTools slider plug-in, we set the active frame's opacity to one.
The Markup
The markup is relatively simple: an unordered list and some containers for the slider, all wrapped in a "scrubber" class. Here's an example from the demo showing five images representing continental drift.
Note: the script requires you define the width and height attributes in the img tags. With these values set, the script will automatically resize the containers and slider accordingly.
This is just a prototype, but I think it could be leveraged into an interesting interactive piece.
Comments
No comments yet.