6 ms·
Star Wars opening crawl from 1977 in HTML/CSS/JS
- ydeft 13y agoA very creative mixture of nostalgia and modern web dev. Thanks for sharing!
- unreal37 13y agoMost of the code is actually to recreate the music. The scrolling of the text is the easy part.
- TimPietrusky 13y agoThe tricky part was to sync the CSS animation with the HTML <audio>-element sound (1:34 minutes long) with the help of JavaScript. The scrolling itself is just a CSS "transform: perspective(300px) rotateX(25deg)". You can also edit the scrolled text because I added the contenteditable="true" attribute to the titles.
- klausjensen 13y agoYou can even edit the text as it scrolls, which is a pretty interesting effect.
- jensenbox 13y agoI wish I could see it - seems busted on Chrome 29.0.1547.65 - Crunchbang Waldorf x64 Logo appears and fades out then nothing but music and blackness.
- TimPietrusky 13y agoThis sounds like 3D is turned off in your Chrome. Can you please check your settings chrome://flags. Maybe "GPU compositing on all pages" is turned off -> turn it on.
- Arkeus 13y agoI have the same issue with no text after the logo. My "GPU compositing on all pages" was set to the default, but after changing it to "enabled" I still see no text. Version 31.0.1626.5 dev-m Aura SyzyASan
- th0br0 13y agoAfter enabing and relaunching chrome the text now works for me. (31.0.1612.0), what does chrome://gpu/ tell you?
- pyalot2 13y agoAh my eyes, the aliasing. If anybody's interested why there's aliasing it's important to know how CSS transforms work. If you transform, the browser lifts the transformed rectangle into its own layer and renders its content to a texture. Then, later, it is composited with the page by blitting that texture with whatever transformation was applied. So CSS transforms are an application of texturing. And in texturing what you do to avoid aliasing is mipmapping (you might also throw anisotropic filtering on top). However as the texture holding the rect the browser rendered isn't square power of two, some devices do not support mipmapping it. It is also quite slow to generate the mipmap for a texture every frame. So with CSS transforms not being able to utilize mipmapping --> aliasing. Now, in particular mipmapping text (that's supposed to be sharp) isn't even the best idea. It just gets blurry and looks unappealing (although that's better with anisotropic filtering, but then, anisotropic filtering is also expensive and not every device/GPU supports it).
- TimPietrusky 13y agoSo what do you suggest I should change? Thanks in advance.
- pyalot2 13y agoWell in CSS you can't do anything about it, that's just how the browser works. If you'd be doing WebGL you can do some things like using square power of two textures and enabling mipmapping and if available anisotropic filtering. You can also do things like using signed distance field fonts or draw fonts by rasterizing (in the fragment shader) the bezier curves, which can be made to nicely anti-alias (using standard derivatives).
- ghayes 13y agoIs this to say that CSS 3D transformations on text are bound to be aliased [in similar circumstances]? Is there a suggestion to the spec such as a "mipmap hint" that could (one day) be added to reduce this flaw without the need for other technologies?
- meerita 13y agoThe logo maybe would be better with SVG, but I think that will not help anyways for the antialiasing.
- ygra 13y agoIs is SVG. It's just your browser (I'm guessing Chrome) that chooses to render it at a fixed size and then scale it up. It's perfectly crisp in IE and Firefox, for example.
- jasonkester 13y agoGotta preload that audio. Even 100ms of lag between the logo showing up and the music starting is noticeable. Jarring even for (presumably) most of us, who have seen that opening crawl dozens, hundreds, or possibly for children of the 70s who went on to own laserdisc players in the 80s, thousands of times. In any other context, you could safely pull off not preloading. But this example is just too ingrained into people's minds.
- TimPietrusky 13y agoYeah I know and it's freaking me out. I already use the attribute preload="auto" of the <audio>-element, but it's not enough. Do you know any better ways to preload it?
- mercer 13y agoI'm assuming there's an event for when the audio is loaded... maybe hook up the animation to that?
- kevincennis 13y agocanplaythrough
- goggles99 13y agoCool, but sadly to me this is almost a parody of how modern web dev innovation HTML5/JS/CSS are so far behind the technology that actually exists in the world today (this was originally created in 1977). Web standards are good, but much faster and be far more "open" and expandable. One suggestion. Don't just create a standard for (monopoly) ECMA Script, instead - create a standard for a VM that other languages can compile bytecode to. Create an API in this VM for graphics, video, audio, ETC. This may be self defeating for these clowns, because JavaScript/CSS/HTML may be decimated in a decade if they actually did this, but hey... One can hope. Once Google firmly owns the browser (like Microsoft in the 2000s) one of two things will happen. One they say to hell with the standards board and push real innovation and opportunity for developers to innovate. Two, they will sit and let it stagnate. Either way, the cycle is coming around again. Android will own the market in a big way soon. Big opportunity is on the horizon and I am getting my hopes up that there is a big shake up with "browser standards". End the monopoly of lame markup, styling, and scripting (HTML/CSS/JS) in the OS of the internet.
- voyou 13y ago"create a standard for a VM that other languages can compile bytecode to. Create an API in this VM for graphics, video, audio." There already is a standard VM with an API for graphics, video and audio - it's called HTML5, and, as a bonus, it also includes an API for text layout. Sure, if you sat down intending to design such a VM, you might not come up with HTML5, but so what; what concrete improvement would you get by distributing programs as bytecode rather than JavaScript?
- jacquesm 13y ago> Don't just create a standard for (monopoly) ECMA Script, instead - create a standard for a VM that other languages can compile bytecode to. Create an API in this VM for graphics, video, audio, ETC. Please no. That's the opposite of where we should be going. Less executable code on the client, more powerful markup. JavaScript was a huge mistake that we will likely have to live with for decades, let's not compound it.
- kaoD 13y ago
- lelf 13y agoIs it really worth #1 on HN? PS: telnet towel.blinkenlights.nl
- chewxy 13y agoThere is also this one which I posted a few months ago: http://scotch.io/demos/star-wars-attack-of-the-dom http://scotch.io/demos/star-wars-attack-of-the-dom
- scotchio 13y agoHa. This is something I made. It never generated as much traction as my Pure CSS3 Lightsaber Checkboxes [1], but if you wait until the end of the crawl, you can take lightsabers and swing them around and hit HTML elements. Pretty neat demo, but, overall, completely useless. The code's also on GitHub [2]. It uses HTML5, CSS3, and Box2dJS. [1] https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes https://github.com/scotch-io/Pure-CSS3-Star-Wars-Lightsaber-... [2] https://github.com/scotch-io/Star-Wars-Attack-of-the-DOM https://github.com/scotch-io/Star-Wars-Attack-of-the-DOM
- ananth99 13y agoNice work! :)
- increment_i 13y agoIt's missing the Episode IV: A New Hope part...what gives?
- curiousdannii 13y agoNo, not the remastered version! Nooooooo!
- stormbrew 13y agoThe subtitle was added to second run theatre prints. Long before the remastering.
- curiousdannii 13y agoTrue, but more people are likely to think of the subtitle as being canonical due to repeated watchings on VHS or DVD than theatre reruns.
- timdiggerm 13y agoIt's the 1977 version. "EPISODE IV / A NEW HOPE" was added for a theatrical re-release in 1981.
- lbenes 13y agoBack in 1994, my 486 had no issue rendering the Star Wars opening crawl in a sweet game, Star Wars: TIE Fighter. Fast forward 20 years, and thanks to the wonders of web, my computer can't even render it correctly. I get a blank screen after the star wars logo. So much for progress. http://www.youtube.com/watch?v=IYks9ZfupZ0 http://www.youtube.com/watch?v=IYks9ZfupZ0
- mahesh_rm 13y agoTo a tech naive eye, this CSS looks and sounds much better than the 486 version. If I had to show my granny my first pc (a ~20 kilos 486) playing the game intro and a retina ipad rendering this css effect, she'd probably be amazed by tech progress in these last 20 years. Further, I can't see how the next 20 years may produce a greater improvement in this render than the past 20s. It's probably just that we can't fully appreciate progress from within..
- nougatmachine 13y agoActually, on my retina iPad this demo doesn't work at all. You hear the music, but no visuals appear.
- laureny 13y agoYes, who could have guessed we would still have bugs in the 21st century, right?
- mrmechi 13y agoi need hacr pliz i need boss hacr for hacr copone
- spmurrayzzz 13y agoI love the fact that the scrolling text is 'contenteditable="true"'. Fun to keep typing during the animation. Very cool.
- skriticos2 13y agoIf I remember correctly, the crawl converged in a point at about 1/3 rd from the top in the original while in this one it scrolls off the top of the screen (at least in the default view). That's a pretty big oversight.
- lucisferre 13y agoIncrease the height of that space at the bottom it looks fine.
- stefcosma 13y agoTim, you amaze me every time. Nice job! :)
- TimPietrusky 13y agoThanks Stefan :D
- joshuak 13y agoYou're doing it wrong. http://static03.mediaite.com/themarysue/uploads/2012/08/bts1.jpg http://static03.mediaite.com/themarysue/uploads/2012/08/bts1...
- TimPietrusky 13y agoOh yes, sorry :D