* To mimic again the first Star Destroyer animation scrollship The trick is to play on 3D rotation and Z translation */ The HTML associated with this sequence is very very simple: Īnd here is the associated CSS to achieve the animations: /* Final ship animation. The final Star Detroyer is simply using the CSS 3D transform trick coupled with a CSS animation. Here is a series of images showing this final sequence done: 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.Ĭompared 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. 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. Note that it uses the standard CSS animation & transform unprefixed specification supported by IE10, Firefox and Opera. 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. Hardware acceleration is definitely great for that! It’s also super fluid on my PC running a simple HD4000 GPU and on my Nokia Lumia 920. The experience is slightly better in IE10 as it’s the only one supporting the CSS Viewport specification. Opera, which doesn’t support yet 3D transform, will then not run properly all parts.
The demo itself should run fine inside IE10 on Windows 7/Windows 8/Windows Phone 8, Firefox, Safari & Chrome. 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. I was too lazy to translate it in English as it’s using some French developer’s unique humor. If you don’t speak French, don’t pay attention to the text.
In my case, I’ve just added 24 seconds of blank sound to synchronize my keyframes with the music itself. 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. Of course, you won’t have audio in this demo as John Williams’ music is copyrighted. It lasts approximately 140 seconds to run the complete demo. Download Video: MP4, WebM, HTML5 Video Player by VideoJSĪnd you can of course run the same demo directly in your favorite browser from here: Coding4Fun StarWars Intro in pure CSS.
0 kommentar(er)
