Pages

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:

This isn't a downsampled down screen shot.  It actually looks like this if you let the rotated div get too large.
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.

14 comments:

  1. that's an amazing post, read more to know about my blog.

    ReplyDelete
  2. Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials…
    Best Devops online Training
    Online DevOps Certification Course - Gangboard

    ReplyDelete
  3. I'm here representing the visitors and readers of your own website say many thanks for many remarkable
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  4. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information. 
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  5. cool stuff you have and you keep Python classes in pune overhaul every one of us

    ReplyDelete