The Star Wars intro in pure CSS3 thanks to 3D transform & animations

During the French Microsoft Techdays that occurred from the 12^th to the 14^th of February 2013, I built a fun, silly demo to start the Coding4Fun session. The idea was to rebuild the famous StarWars intro with the 3D scrolling text and the slide down effect with a star destroyer ship coming at the end. This demo was built using only some CSS3 3D transforms and animation, as well as the HTML5 audio and video tags.

Yes, it uses 0 line of JavaScript !!!

This demo is mainly based on this awesome article: Star Wars 3D Scrolling Text in CSS3 from Craig Buckler. But I’ve tweaked it a little bit by adding some parts at the beginning. The most cool part was added at the end of the text scrolling.

Of course, you can run the same demo directly in your favorite browser from here: Coding4Fun StarWars Intro in pure CSS . It lasts approximately 140 seconds to run the complete demo. Unfortunately, you won’t have audio in this demo as John Williams’ music is copyrighted. So, if you’d like to have the complete video and audio experience, go buy the music composed by John Williams, convert it to mp3 and/or ogg and add it to the audio tag definition you’ll find in the source code. In my case, I’ve just added 24 seconds of blank sound to synchronize my keyframes with the music itself.

p.s. If you don’t speak French, don’t pay attention to the text. It usese some French developer’s inside humor. I’m sure you don’t want to share that. " src="http://www.codeproject.com/script/Forums/Images/smiley_smile.gif" />

Alternatively, as my UK friends like Martin Beeby noted, we only use pure HTML text. So you can just fire up an online translator, get the language of your choice and replace it in the source code! For instance, try the English version or the Chinese version. " src="http://www.codeproject.com/script/Forums/Images/smiley_smile.gif" />

The demo itself should run fine on IE10 on Windows 7/Windows 8/Windows Phone 8, Firefox, Safari and Chrome. Opera, which doesn’t support yet 3D transform, will not run the demo properly. The experience is slightly better in IE10 as it already supports the CSS3 Viewport specification. It is also enhanced because CSS3 transforms are performed in IE10 using hardware acceleration, so the demo runs very fluidly on my PC with a simple HD4000 GPU and on my Nokia Lumia 920!

If you’d like to understand how it works, all the demo logic is contained inside index.css which use a lot of keyframes definition with the appropriate timings. Note that it uses the standard, un-prefixed specifications for CSS3 animations and transforms supported by IE10, Firefox and Opera. To support older experimental Webkit implementations, I’ve added a webkit-index.css file containing the very same logic but with the –webkit prefix for Chrome and Safari browsers. Let’s hope that those browsers will soon implement the unprefixed versions to join the club.

Compared to Craig’s original demo, I’ve added a simple intro with some fading effects and an additional vertical scrolling at the end of the 3d text, which finally ends with a looping HTML5 video.

Here is a series of images showing this final sequence done:

The final Star Detroyer is built only using the CSS3 3D transform trick, coupled with a CSS3 animation. The HTML associated with this sequence is very very straightforward:

<video class="fondvideo" poster="fondfixe.jpg" autoplay loop>
    <source src="hprichv.mp4" />
    <source src="hprichv.ogv" />
</video>

<img class="galaxy" src="bg_image.jpg" />

<img class="destroyer" src="stardestroyer.png" />
<div class="finalfading"></div>

Below is the associated CSS, required to achieve the animations

/* Final ship animation. The trick is to play on 3D rotation and Z translation */
/* To mimic again the first Star Destroyer animation */
@keyframes scrollship {
    0% {
        opacity: 0;
        transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: perspective(300px) translateZ(-4000px) rotateX(-80deg);
    }
}

/* Translating the galaxy image background on the Y axis to again */
/* mimic the StarWars intro */
@keyframes galaxyscrolling {
    0% {
        top: 0%;
    }

    100% {
        top: -100%;
    }
}

/* The video tag is animated in the same time as the galaxy  */
/* to achieve a continuous animation */
@keyframes videoscrolling {
    0% {
        top: 55%;
    }

    100% {
        top: -40%;
    }
}

/* Final black fading */
@keyframes finalfadingkeyframes {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* First image background */
.galaxy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    animation: galaxyscrolling 15s ease-out 111s 1;
    animation-fill-mode: forwards;
}

/* background HTML5 looping video */
.fondvideo {
    position: absolute;
    width: 100%;
    height: 200%;
    top: 55%;
    animation: videoscrolling 15s ease-out 111s 1;
    animation-fill-mode: forwards;
}

/* Final destroyer animation. It's just a PNG image animated using 3D Transform */
.destroyer {
    position: absolute;
    top: -70%;
    opacity: 0;
    transform-origin: 50% 100%;
    width: 100%;
    height: 100%;
    transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    animation: scrollship 120s linear 125s 1;
    animation-fill-mode: forwards;
}

/* final fading using a black div */
.finalfading {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: black;
    animation: finalfadingkeyframes 5s ease-out 140s 1;
    animation-fill-mode: forwards;
}

The timings for the keyframes are currently set for the global sequence. You see for instance that the final fading (described for the class .finalfading) only occurs after 140s. You can see also that the final ending black fading is simply done with an overlay black DIV getting from opacity 0 to 1.

The super-cool HTML5 video being used is that of the earth showing the Auroria effects, shot by by the NASA from outer space. You can find other videos like this from the NASA website at Videos Aurora, or at Crew Earth Observations Videos.

Finally, to try to control the viewport, to ensure the same experience and relative layout across resolutions, I use the @viewport CSS specification, a part of the CSS Device Adaptation, Section 4.

@-webkit-viewport {width: 1366px;height: 768px;}
@-moz-viewport {width: 1366px;height: 768px;}
@-ms-viewport {width: 1366px;height: 768px;}
@-o-viewport {width: 1366px;height: 768px;}
@viewport {width: 1366px;height: 768px;}

This specification is currently only supported by IE10 in the PC world. The demo doesn’t break in other browsers. But on IE10 we have more control on the experience at various resolutions thanks to the viewport rule.

To see what I mean, try this demo in Internet Explorer 10 and resize the window during each sequence of the demo.

If you don’t have a way to test Internet Explorer 10, you can use the Browser Stack service to test it. You can get 3 months free of Browser Stack through Modern.IE. Check it out - this is a great way to do cross-browser and cross-device testing!

That’s all folks. I hope you enjoyed this fun experiment!

David Rousset is a Developer Evangelist at Microsoft, specializing in HTML5 and web development. This article originally appeared on his MSDN blog, Coding4Fun on 25th Feb 2013.You can follow him @davrous on Twitter.