Original:
Tuesday, September 28, 2010
Tuesday, September 21, 2010
CSS3 Star Wars Tweet Scroller
I've been playing around with some new CSS3 3-D transforms and whipped up this Star Wars scroller for Tweets:
Caveat: This currently only works on Safari. It may work on a bleeding edge Chrome dev build but I haven't tried that.
There are some other examples of this type of scrolling effect out there but I wanted to make one for tweets. I also noticed that there are some odd effects if you naively keep appending content to a div that's been rotated in 3-D. As it reaches a certain height, webkit apparently starts downsampling (I guess to save memory in the rendering pipeline? A limitation of hardware? Who knows) and you get this pixelated effect:
As you can see, it becomes unreadable after a while. It also starts eating up an increasing amount of CPU: it got to 100% (out of 400%) on my quad core iMac after a few minutes. Not good.
So instead of putting all of the tweets into the same rotated div, I rotate each tweet element individually and that seems to fix the problem. Also, I start deleting tweets at the top (where you can no longer see them anyways) after a while, just to keep the dom size down. They are now readable and the CPU is happy.
Other stuff:
Instead of using CSS3 animations, I opted for javascript because I was loading the tweets with JS already and I'd have to manipulate the animations with JS anyways.
Also, the background is generated dynamically using the Canvas element. I wanted a more realistic looking star field so I did some research on the distribution of star sizes and colors to see if I could perhaps simulate it with a Pareto distribution. Turns out the distribution of star colors and brightness is some other weird distribution so I just made it more or less random, with smaller stars slightly more frequent than larger stars.
Check it: CSS3 Tweet Scroller
Caveat: This currently only works on Safari. It may work on a bleeding edge Chrome dev build but I haven't tried that.
There are some other examples of this type of scrolling effect out there but I wanted to make one for tweets. I also noticed that there are some odd effects if you naively keep appending content to a div that's been rotated in 3-D. As it reaches a certain height, webkit apparently starts downsampling (I guess to save memory in the rendering pipeline? A limitation of hardware? Who knows) and you get this pixelated effect:
 |
| This isn't a downsampled down screen shot. It actually looks like this if you let the rotated div get too large. |
So instead of putting all of the tweets into the same rotated div, I rotate each tweet element individually and that seems to fix the problem. Also, I start deleting tweets at the top (where you can no longer see them anyways) after a while, just to keep the dom size down. They are now readable and the CPU is happy.
Other stuff:
Instead of using CSS3 animations, I opted for javascript because I was loading the tweets with JS already and I'd have to manipulate the animations with JS anyways.
Also, the background is generated dynamically using the Canvas element. I wanted a more realistic looking star field so I did some research on the distribution of star sizes and colors to see if I could perhaps simulate it with a Pareto distribution. Turns out the distribution of star colors and brightness is some other weird distribution so I just made it more or less random, with smaller stars slightly more frequent than larger stars.
Subscribe to:
Posts (Atom)