There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went "far far away", compared with my simple CSS gallery.

Guillermo Esteves presented a piece of history translated for tomorrows browsers:  the Star Wars Episode IV opening crawl in HTML and CSS:

Unfortunately, the live experiment is not suitable for all browsers and the ideal target seems to be only OSX 10.6 and its latest Safari browser but it partially worked via Google Chrome as well.

Something To Learn About

We are moving complex computations into our favorite "decoration layer": CSS
We also want as much control as possible, and the above concept is brilliant to understand how to tame CSS transitions.
This example includes new and different techniques. Here is what I found interesting:

@font-face

OK, this is not new at all, but in this case I could not find a single valid reason to avoid the original font: a must! The only point here is that the author could have saved a bit of bandwidth via pre-deflated or gzipped fonts rather than serving them without any apparent optimization.

PLAIN TEXT
CSS:
  1.  
  2. @font-face {
  3.    font-family: FGB;
  4.    src: url("/experiments/frabk.ttf") format("truetype");
  5. }
  6.  

It's a shame there is not the real STAR WARS font as well but just an image ... anyway, let's move into more concrete stuff ...

Perspective

PLAIN TEXT
CSS:
  1.  
  2. #stage {
  3.   height:600px;
  4.   width:1000px;
  5.   overflow:hidden;
  6.   margin: 0 auto;
  7.   -webkit-perspective:800;
  8.   -webkit-perspective-origin:center 300px;
  9. }
  10.  

The stage is the block element where the magic happens. The perspective property is able to give us a "deep space" 3D feeling making closer objects look larger than further ones. Via origin modification we can decide where things should disappear, in this case a bit higher point than a central 400px, to create a similar atmosphere respecting the movie choice (and I guess to make content readable as well).

Iteration-count and Custom transitions

PLAIN TEXT
CSS:
  1.  
  2. #far-far-away {
  3.   color:rgb(75,213,238);
  4.   font-family:FGB, sans-serif;
  5.   font-size:48px;
  6.   line-height:1.5;
  7.   position:absolute;
  8.   top:200px;
  9.   left:190px;
  10.   opacity:0;
  11.   -webkit-animation:fade-in-out 6s linear;
  12.   -webkit-animation-iteration-count: 1;
  13.   -webkit-animation-delay:5s;
  14. }
  15.  

Far far away is the initial text. As we can see with other browsers as well this appears and disappear in 6 seconds.
This fade-in-out happens just once, so at the end of the effect, unless we won't modify the node class, the element won't be displayed anymore. This is what the animation-iteration-count property does while next snippet is the fade-in-out customization:

PLAIN TEXT
CSS:
  1.  
  2. @-webkit-keyframes fade-in-out {
  3.   0% { opacity:0; }
  4.   16%   { opacity:1; }
  5.   84%   { opacity:1; }
  6.   100%   { opacity:0; }
  7. }
  8.  

Via keyframes <transition_name> we can blend FX linearity deciding the amount of opacity, or other properties, at certain moments.
A generic normal linear fade-in-out would be visible 100% only in the middle of the transition while in this case it is forced to be visible for 68% of the time, making fade in and out still homogeneous but controlling the full opacity for longer.
We could have used an ease-in-out effect over opacity property to obtain a similar result but I find definitively more interesting this kind of approach.

Warp Speed: Action!

Thanks to Z axis transitions the initial STAR WARS image can appear and disappear using again a customized FX:

PLAIN TEXT
CSS:
  1.  
  2. @-webkit-keyframes logo {
  3.   0% { -webkit-transform: translateZ(0); opacity:1;}
  4.   50% { -webkit-transform: translateZ(-50000px); opacity:1; }
  5.   60% { -webkit-transform: translateZ(-60000px); opacity:0; }
  6.   100%   { -webkit-transform: translateZ(-100000px); opacity:0;}
  7. }
  8.  
  9. /* few lines after, img is the only logo image */
  10. img {
  11.   opacity:0;
  12.   position:absolute;
  13.   top:100px;
  14.   width:1000px;
  15.   -webkit-transform-origin:center center;
  16.   /* above custom logo animation */
  17.   -webkit-animation:logo 25s linear;
  18.   -webkit-animation-iteration-count: 1;
  19.   /* suspance before the logo ... */
  20.   -webkit-animation-delay: 12s;
  21.   /* logo appears slower and fly away faster */
  22.   -webkit-animation-timing-function: ease-in;
  23. }
  24.  

Above mix of webkit properties suggests me that new JavaScript libraries will use run-time actions to CSS transformations soon, rather than hard and manual JS computations over computed styles or similar expensive operations.
We can control delays, we can stop FXs removing classes or simply overwriting existent directives and, moreover, we can split the CSS itself into logical parts as the same @gesteves did, putting custom animations all together: good hint!

The Crawl

Last piece to check out is the text plus its title.

PLAIN TEXT
CSS:
  1.  
  2. /* custom crawl FX */
  3. @-webkit-keyframes crawl {
  4.   /* axis management until it disappears */
  5.   0% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(1100px);opacity:1;}
  6.   40% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-340px);opacity:1;}
  7.   80% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-1780px);opacity:0;}
  8.   100% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-2500px);opacity:0;}
  9. }
  10.  
  11. #crawl {
  12.   color:rgb(252,223,43);
  13.   font-family:FGD, sans-serif;
  14.   text-align:center;
  15.   font-size:36px;
  16.   opacity:0;
  17.   /* long animation */
  18.   -webkit-animation:crawl 120s linear;
  19.   /* again just once */
  20.   -webkit-animation-iteration-count: 1;
  21.   /* starting while the logo is still there */
  22.   -webkit-animation-delay:16s;
  23.   /* preserving 3D aspect for the entire animation */
  24.   -webkit-transform-style:preserve-3d;
  25. }
  26.  
  27. #crawl p.title {
  28.   font-family:FGDC, sans-serif;
  29.   /* it's a title */
  30.   text-transform:uppercase;
  31.   /* it's massive */
  32.   font-size:96px;
  33.   /* but scaled to fit inside margins */
  34.   -webkit-transform:scaleX(0.6);
  35. }
  36.  
  37. #crawl p {
  38.   /* preserve spaces */
  39.   white-space:pre;
  40. }
  41.  

The Mythical Song

Well, this demo could not miss a proper audio element:

PLAIN TEXT
HTML:
  1.  
  2. <audio src="/experiments/starwars.m4a" id="audio" autobuffer="autobuffer" />
  3.  

Apparently the used compression is truly good and the sound loud and clear. But who is in charge to start above song?

JavaScript

Quite hilarious all this demo does not basically need JavaScript at all except for an audio delay forced via interval:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. setTimeout("document.getElementById('audio').play()", 12000);
  3.  

If we have a good broadband connection and we are sure in 12 seconds we have buffered enough audio, the synchronization between JavaScript and the transition delay is almost perfect and the demo experience unique.

It is great to see this work, and I look forward to seeing what he comes up with next. It feels that with HTML5, CSS3, and the Web.Next we will be able to be much more creative. Finally, it's December, I can already imagine a CSS3 based snow effect for our pages ... no?


Related News :