Web Experiments with CSS3, JavaScript, and jQuery

The following are a series of visual experiments using CSS3 and Javascript (mostly powered by jQuery). Most are background animations done completely without the support of "Flash" technology, so they work on devices like the iPad and iPhone. Wherever possible, the base jQuery animations are "upgraded" to CSS3 via the excellent jQuery Transit plugin. I've also included a few other experiments, including my jQuery Timeliner and Permit.js plugins.

You will need to use a "modern browser" to see the visual experiments in full. If you're using anything older than Internet Explorer 9, you're largely out of luck. You deserve better! Consider upgrading or switching to a better, faster browser such as Google Chrome. It's free and will make your experience here and on other sites much, much nicer.

For the rest of you, please enjoy. I hope to do more of these in the near future and would love your feedback.

Permit.js

Permit.js, a jQuery plugin, is a tool for information architects and UX/UI professionals that makes building interactive, multi-state prototypes for websites and apps easy.

Timeliner.js

Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) fully accessible and 508 compliant (an original requirement) (2) simple, (3) able to handle nearly any form of content, and (4) printer friendly. There's also plenty of room for you to get creative with the styling.

Human

He is alive. You wouldn't know it except that he blinks occasionally.

Cat

Purr.

Sky

Hot air balloons that appear, roam through your mind, and then disappear.

Identity

Despite what some may argue, Windex doesn't cure everything. To get rid of these oily prints, you'll need to move along.

Tree

The tree dream was the first one I made. One set of birds emerges from the tree, the other escapes toward it. Some might put this one in the category of a bad dream. Others, Portlandia fans for example, might think this dream was saved by having "put a bird on it."

Tragedy

This one definitely falls in the category of a bad dream. A close look will show that it alludes to the devestation the city of Detroit has undergone since the late 1960s. The central images are an antique map of Detroit and a US military map of the blast and fire area caused by the US' bombing of Hiroshima, Japan. The map of Detroit includes the hometown of my childhood and adolescence, Royal Oak, MI.

Train

I came across this train schematic a number of years ago and I credit it for sparking my interest in blue prints, schematics, medical illustrations and the like. Its original non-monochromatic format was the featured piece of artwork on my homepage until I redesigned this site in 2012.