Really nice Andrew. The one downside perhaps is that people won't read any of the content preferring instead to play with the animation.
Thanks for the comments guys.
@Paul & Ryan: I agree completely, as I already said it's not the most practical. That also wasn't the goal with this though. As a fun & memorable effect to complement my personal details, I think it did the trick.
@Sveinn: I didn't only use HTML1 & CSS1 on the site, but all that's required to reproduce the effect is 'background-image,' 'background-attachment: fixed,' and a few HTML elements. These are all in the original specs. It's not so important though, I was more poking fun at how everything is promoted as HTML5 & CSS3 these days (even this very page: https://twitter.com/dmmoli/status/316177650387398656).
This has a fundamental problem as a website. To experience the effect, users must quickly scroll, and if they are quickly scrolling, they cannot use the website.
Agreed. Although I really like the concept. Perhaps some of the content can be fixed? Also, A scroll to top (or bottom) button could be a good way to highlight the animation with out users having to do any work.
Right, I agree. The site is a nice proof of concept, but there's something missing. Your suggestion about a scroll to top/bottom call-to-action is spot on! Going that direction, the running animation wouldn't be the point of the site, but rather a discoverable treat.
Yeah, that would definitely be a really nice touch! Would love to see the concept put into better context.
For what it's worth, if you scroll a whole bunch you'll eventually get a button to make the cat run backwards.
How is it HTML1 or CSS1?
I find this site amazing. The problems the guys have pointed out are valid, but since it's the personal page of an interactive product designer, it totally makes sense trying out new things and look for memorable effects. Way to go, Andrew!
Awesome idea! But just noticed that it shows as a blank page in Firefox.
Thanks.. got it working in FF as well now. I've had better luck with IE than Firefox lately...
In contrast of impressive HTML5 and CSS3 examples, here's a simple animation technique inspired by the zoetrope device. Admittedly not the most practical, but I would love to see some other examples of this in action.