Star Wars 3D Scrolling Text in CSS3 | Hacker News Reader

Star Wars 3D Scrolling Text in CSS3

sitepoint.com

61 pointsceeb17 comments

Hehe, I did the same thing 2 years ago [1], hooked up the mousewheel and also made it so the text could be selected and modified. Back then the browsers implementation was still very early and the text would disappear. Glad to see that it works properly now.

[1] http://mrdoob.com/lab/css/starwars/

Nicely done, I was disappointed to see that this one couldn't be scrolled.

Live code demo: http://codepen.io/squarecat/pen/KuHsl

Edit: The article has a demo, but live code is sexy.

Edit2: Now with music, courtesy http://news.ycombinator.com/item?id=4693403 (rudimentary play/pause control at top left via partially-exposed video)

It looks like most of the comments are about how the 3D scrolling text does not work in this or that browser. Detecting support for CSS3 3D transforms is nontrivial (and perhaps impossible).

We deployed something similar on the homepage at http://art.sy. I wrote a post about our struggles detecting CSS3 3D transform support here: http://artsy.github.com/blog/2012/10/18/so-you-want-to-do-a-...

Our code https://github.com/zamiang/detect-css3-3d-transform

Maxed out both my cpu cores. Is framelimiting or similar techniques hard to do in Javascript?

That's wierd - I show a cpu usage of about 48-52% on one of my four threads (2 cores) when I have the tab open, and under 5% on all with the tab closed.

This is on Firefox, Linux.

A side note: I started involuntarily humming the star wars theme to myself as the text started to scroll... I dare say: George Lucas has hacked my brain!

Intel i7 (4 cores w/ hyperthreading) running Ubuntu and Chrome 22 and that at one point was >60% on 3+ threads. On the bright side, it's great that Chrome is able to so seamlessly multithread complex CSS operations. That said, this is a rather fast CPU and I would have expected it to perform better.

How soon will we see "Please update your video drivers to their latest versions before using this site."

Seems like Chrome/-ium is the culprit. Runs with low cpu on opera but it visible jitters.

Odd, Intel i7 2600 ( windows 64 + Chrome) = 9%.

About 50% usage on two cores here when the tab is open. Still, I think this is way too much for that sort of effect.

Oh and I was humming it as well ;)

It's pure CSS, no Javascript.

Ouch! Impressive. I have become so used to things "pure" CSS/HTML5 where it really is Javascript doing the work.

Running IE10 I see <5% CPU utilization.

Watch the demo with http://www.youtube.com/watch?v=EjMNNpIksaI on, in the background. It makes it much more enjoyable! ;) Haha

The text doesn't show up for me on Chrome 22.0.1229.94/Ubuntu 10.04. I get some flickered "short time ago" and "Star Wars", but just blackness after.

Looks cool on FF.

Not working in Chrome Version 22.0.1229.94/OSX either, and Chrome says it is up to date...

Reply on news.ycombinator.com