Dynamic web presentations without using Flash

A week ago, Chris Mills (Opera Software) said that he “plans a series of articles showing that it is possible to do flash-like things using only open web standards.” It seemed to me interesting, and when I came across a small flash presentation of the photo portfolio in the magazine Newyorker, I decided to illustrate the idea of ​​Chris, remaking the presentation. It seemed to me that using JavaScript would be quite easy to do, and I decided not to look for easy ways, and to make a presentation using only the possibilities of CSS. It was also interesting for me to try out in practice delicious CSS3 innovations, such as transitions.
If you just want to view the demo ( second link ), then you need one of these browsers:

• Best for now: Google Chrome 4 or Apple Safari 4
• Firefox 3.7 (half-stuffed builds)
• Opera 10 Mobile (Presto 2.3) or, if you are an insider, then Opera (Presto 2.4)

I also apologize for the stupid screen of paranoid MyOpera, which requires confirmation that you really want to view the file. I promise not to harm you or your computer. :)

In general, I began by studying the flash movie. Fortunately, it turned out that its creators separated the data (XML and images) and the presentation (Flash). So anyone can easily make their implementation.
On a locally stored XML, I hung a small XSL that generates the HTML needed for the presentation — everything was simple and straightforward.
Here is the most interesting part of the resulting HTML structure:
< div id ="name" >
< div id ="country" >
< div id ="age" >
< div id</font> ="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 >
* This source code was highlighted with Source Code Highlighter .

Now there was a lineup for CSS . In a nutshell: using the pseudo-class :target I was able to switch the sorting of photos, using CSS3 transitions (transitions) I was able to show "visual sorting" and the smooth effects of transitions, appearances and disappearances. To display large photos, I decided to use the pseudo-class :active , - the user will need to hold the mouse button over the photo of interest. I also used RGBA and box-shadow.
Here is an example of the horror that must be written now for each browser, because officially standard still in development:
-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;
As soon as the transition module becomes a recommendation, it will be necessary to add a line without a manufacturer-specific prefix.
Here, in general, that's all. Creating this demonstration, I did not set a goal to copy all the functionality of the original, but, as I said before, I see it as 100% possible using JavaScript and some technology for playing audio files. Also with the help of JavaScript, you can support users of IE.
I tested this demo in Google Chrome 4, Apple Safari 4, and Mozilla Firefox 3.7. Firefox has some problems with transitions. I added the prefixes -o- to some rules, so that it will be possible to test in Opera.
Any useful comments and corrections are welcome!