Coding4fun: the Star Wars intro in pure CSS3 thanks to 3D transform & animations
During the French Microsoft Techdays that occurred from the 12th to the 14th of February 2013, I’ve built a fun & stupid 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 useless demo was built using only some CSS3 3D transform & animation and the HTML5 audio & 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.
Here is a video of the result running inside IE10:
Download Video: MP4, WebM, HTML5 Video Player by VideoJS
And you can of course 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. Of course, you won’t have audio in this demo as John Williams’ music is copyrighted. So, if you’d like to have the complete video & audio experience, go buy the music composed by John Williams (the best composer in the universe !) and convert it to mp3 and/or ogg to map 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.
If you don’t speak French, don’t pay attention to the text. I was too lazy to translate it in English as it’s using some French developer’s unique humor. I’m sure you don’t want to share that. 
Update: some of my UK friends, like Martin Beeby, noted that as it’s only some pure HTML text used, you just need an online translator to target the language of your choice! For instance, try the English version or the Chinese version. 
The demo itself should run fine inside IE10 on Windows 7/Windows 8/Windows Phone 8, Firefox, Safari & Chrome. Opera, which doesn’t support yet 3D transform, will then not run properly all parts. The experience is slightly better in IE10 as it’s the only one supporting the CSS Viewport specification. It’s also super fluid on my PC running a simple HD4000 GPU and on my Nokia Lumia 920. Hardware acceleration is definitely great for that!
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 CSS animation & transform unprefixed specification 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 & Safari browsers. Let’s hope that those browsers will soon implement the unprefixed versions to join the club made of IE10, Firefox & Opera to definitely get rid of vendor prefixes on those specifications.
Compared to the original Craig’s demo, I’ve added a simple intro with some fading effects and an additional vertical scrolling at the end of the 3d text scrolling which ends to a html5 looping video.
Here is a series of images showing this final sequence done:
The final Star Detroyer is simply using the CSS 3D transform trick coupled with a CSS animation. The HTML associated with this sequence is very very simple:
<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="finalfadding"></div>
And here is the associated CSS 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 finalfaddingkeyframes {
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 */
.finalfadding {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background-color: black;
animation: finalfaddingkeyframes 5s ease-out 140s 1;
animation-fill-mode: forwards;
}
The timing are the one currently set for the global sequence. You see for instance that the final fading 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 is the earth shooted by the NASA from the space and showing some magic aurora effects:
Credit: Image Science & Analysis Laboratory, NASA Johnson Space Center
You may find other videos like that from the NASA on their website: Videos Aurora or here Crew Earth Observations Videos
Finally, to try to control the viewport to have the same experience across resolutions, I’m using the @viewport CSS specification coming from 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 desktop world. The demo doesn’t break in other browsers. But the experience is a bit better in IE10 as we have more control on the various resolutions thanks to the viewport rule.
Under Internet Explorer 10, try for instance to resize the window during each sequence of the demo and you’ll see what I mean. If you don’t have a way to test Internet Explorer 10, you have 2 options:
1 – Use Browser Stack to test it. You have a 3 months offering thanks to our Modern.IE website. You should have a look to it!
2 – Have a look to this short video:
Download Video: MP4, WebM, HTML5 Video Player by VideoJS
That’s all folks. I hope that some of you will enjoy this funky experiment.
Comments
Anonymous
February 27, 2013
Cool, really I learn new things related to CSS3. Thanks!Anonymous
March 16, 2013
very coolAnonymous
April 07, 2013
WOW ! Nice Experiments .:-)Anonymous
May 04, 2013
Can anyone send me the full code so I can get it to work? I'm new to coding so if you have instructions, that would help greatly - like did the movie get a different format, where are the Star Destryer pics to use with the animation and how was this extra coding added to the original SW coding (I did get that to work for me) I don't know where to begin with this addition. Any help would be great. atenciomike (AT) yahoo (DOT) com if you want to send the full HTML code, video and pics to use. Thank you for your help in advance. My students will love to see this on our little website.Anonymous
June 27, 2013
How are all these links dead so soon? No videos, no demos, no code, no nothin.Anonymous
August 06, 2013
The Force is strong with this one.