I thought it might be nice if jQuery's css() method would internally reconcile browser differences with CSS Transforms just like it reconciles differences with for example the opacity property. I am currently supporting CSS Transforms in WebKit/Safari/Chrome, Firefox 3.5+, IE9, and Opera. Usage example and code after the jump.
Continue Reading Post and 3 Comments…
I started a new project just for kicks: the Birdmanizer. It is a tool which loads any website and animates it into your browser view using the "cinema newspaper" (or perhaps "spinning vinyl") style CSS effect I mentioned in my earlier blog post on CSS Transforms. I was inspired by the cut scenes in the original Batman TV series, as well as the cut scenes from the Harvey Birdman cartoon series — where the project gets its name and audio clip.
This tool will transform any website into an animated cut scene inspired by the original Batman TV series and the Harvey Birdman cartoon series. WebKit/Safari browsers only for now — it is a work in progress.
WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.
Update: CSS Transforms are now available in Safari, Chrome, Firefox 3.5+, IE9+, and Opera. Check out my patch that enables setting and animating CSS Transforms with jQuery.
Continue Reading Post and 19 Comments…
Ground control didn't like zachstronaut sitting on the launch pad with a storm of content brewing just off the coast (there is a lot of stuff I've been eager to post online), so the site blasted off a bit early. Because of this there are a couple of areas in particular that I plan on redesigning and/or re-factoring later: comments and the projects page.
The design for this site — with the rocket that blasts off as you scroll and the lunar horizon that rises to greet you with the footer — was accomplished with some clever use of CSS, specifically: position: fixed; and background-position: fixed; All of the pixel artwork and icons I did by hand. The craters on the moon were especially fun to draw.