Star Wars 3D Scrolling Text in CSS3

http://www.sitepoint.com/css3-starwars-scrolling-text/

by ceeb • 14 years ago

61 17 14 years ago

aw3c23• 14 years ago

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

Alterlife• 14 years ago

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!

yock• 14 years ago

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.

tsahyt• 14 years ago

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 ;)

martindale• 14 years ago

It's pure CSS, no Javascript.

aw3c23• 14 years ago

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

localhost• 14 years ago

Running IE10 I see <5% CPU utilization.

mrdoob2• 14 years ago

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/

alxndr• 14 years ago

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

bluetidepro• 14 years ago

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

squarecat• 14 years ago

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)

peeters• 14 years ago

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.

borlak• 14 years ago

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

zamiang_brennan• 14 years ago

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

Star Wars 3D Scrolling Text in CSS3

Related Stories