Build dynamic Web presentations without Flash
Monday, December 7, 2009 11:13:37 PM
If you don't want to go into implementation details, here is a demo (alternative link).
Sorry for stupid My Opera nag screen, no harm will be provided to you or your computer. Also you will need Google Chrome 4 or Safari 4 or Firefox 4 or Opera with Presto 2.3+ engine.
So, I started with examining the Flash presentation sample. Thankfully it appears that creators separated data (XML and pictures) from presentation (Flash), so anyone can pretty easily create their own implementation.
<div id="name"> <div id="country"> <div id="age"> <div id="gender"> <div id="tenure"> <p id="menu">Order by: <a href="#name" id="menu-name">Name</a> <a href="#country" id="menu-country">Country</a> <a href="#age" id="menu-age">Age</a> <a href="#gender" id="menu-gender">Gender</a> <a href="#tenure" id="menu-tenure">Tenure</a> </p> <ul> <li>...</li> <li>...</li> ... </ul> </div> </div> </div> </div> </div>
Now it was CSS turn. In two words: using
:target pseudo-class I was able to switch sorting of photos, using CSS3 transitions I was able to show "visual sorting" and smooth fade-in-out effects. To show big pictures I decided to use
:active pseudo-class (user needs to hold mouse button on a thumbnail). From CSS3 I also used RGBA and box-shadow.
-webkit-transition-property: opacity; -webkit-transition-duration: .6s; -webkit-transition-delay: .6s; -moz-transition-property: opacity; -moz-transition-duration: .6s; -moz-transition-delay: .6s; -o-transition-property: opacity; -o-transition-duration: .6s; -o-transition-delay: .6s; transition-property: opacity; transition-duration: .6s; transition-delay: .6s;
Once CSS3 transitions module will become a recommendation, we will need to add properties without vendor prefixes.
I tested this demo in Google Chrome 4, Apple Safari 4, and Mozilla Firefox 3.7 builds. Firefox seems has some glitches with CSS transitions, but it is useful even in this state. I added -o- prefixes, so someone can test this on Opera Mobile 10 (Presto 2.3) or next Opera for desktop (Presto 2.4).
Any comments, suggestions and corrections are welcome.