Friday, April 21st, 2006

JavaScript Animations: Virtual Raster Scrolling and Rotating Cube Effect

Category: JavaScript, Library, UI

Yusuke Kawasaki has put together some interesting JavaScript animation classes.

Animation.Cube – Rotating Cube Animation Effect

I love seeingthe rotating cube effect when I switch desktops in my desktop manager. Now you can simply rotate images via Animation.Cube.

Animation.Raster – Virtual Raster Scrolling Class

Want to see a lot of td’s wiggle? Animate.Raster provides a virtual raster scrolling’s effect for images and block elements.

javascript

  1. var ras = new Animation.Raster( id_or_elem, image_url );
  2.     ras.lineHeight  = 4;                    // scroll line's height
  3.     ras.clip        = false;                // clip animation area (default: true)
  4.     ras.background  = "#000000";            // animation area's background
  5.     ras.downSeconds = 1.0;                  // falling down animation
  6.     ras.fadeSeconds = 4.0;                  // fading wave animation
  7.     ras.waveSpeed   = 0.5;                  // wave's speed
  8.     ras.onComplete  = function () { ... };  // callback function
  9.     ras.scroll();

Raster Animation

Posted by Dion Almaer at 10:38 am
17 Comments

+++--
3.7 rating from 49 votes

17 Comments »

Comments feed TrackBack URI

was javascript meant to do this? just because you can, doesn’t mean you should…..

Comment by krazykarl — April 21, 2006

[…] Ajaxian kwam vandaag met twee mooie linkjes. De linkjes verwijzen naar een website van Yusuke Kawasaki en geven een demonstratie van de mogelijkheden van JavaScript. Of de taal hiervoor bedoelt is valt natuurlijk te betwisten, maar leuk is het wel. […]

Pingback by Edwin V. » Funky JavaScript — April 21, 2006

This is quite a bit faster on Internet Explorer than on Firefox. But it’s pretty slow in both…

Comment by Matthew Ratzloff — April 21, 2006

This is an experimental kind of effect, quite CPU-intensive and certainly not for general use. That being said, it’s a nice technical achievement of sorts!

Firefox seems to render the 3D cube faster than IE on my machine, it appears that IE breaks down when moving many copies of the same image around (or maybe my own approach to a similar effect used a less-efficient method.)

Also of note for JS effects is the work of “P01”, anyone familiar with the old Atari/C64 “demoscene” will appreciate this demo which shows a lot of real-time JS stuff (anyone who recalls “Second Reality” might recognise one of the sprites used, in fact.)

Also quite neat are the mooncheese and redbug demos. The latter is quite impressive as it’s 64 KB of code, and several minutes in length.

Comment by Scott Schiller — April 21, 2006

Great effects. I don’t understand the first comment by krazykarl, it’s not like this bit of script has brought us closer to human cloning or anything. Even if there is no partical value or theres a better way, I think both effects are great proof of concepts. I love the use of perspective.

Nice one Yusuke Kawasaki!

Comment by kim3er — April 21, 2006

Just looking at the calendar makes my eyes bleed. But the photos demo is cool.

Comment by Brian — April 21, 2006

I get krazykarl’s point. It’s a nice showcase effect but I don’t see why you’d want to use it.

Comment by Bill Snebold — April 21, 2006

[…] In what feels like a return to the heady ’spinning logo, flaming logo’ days of early web design, Yusuke Kawasaki has created a way to produce cube image rotations in Javascript. While this is wonderful eyecandy and some pretty deft Javascript programming, I’m not entirely sure how useful this might be in practical terms. via Ajaxian […]

Pingback by Rotating Animation Effects in Javascript » moebius recursive — April 21, 2006

Krazykarl and Bill:
It’s a proof of concept. It’s a “I wanted to do it and I did it”. A programming language by definition doesn’t have rules on what it should or shouldn’t be used. You may not see why anyone would use it but other might and if nobody uses it it still may serve to do further things.

Incidentally, the first thing someone said when I showed them scriptaculous, open rico and lightbox was “Why would you want to use that!?”. I’m sure someone even said it back when CSS was first proposed.

I think people are too afraid of “the next BLINK”

Comment by Eduo — April 21, 2006

Except… why is the second day of April still the 1st, and not the 2nd?

Comment by Merle — April 21, 2006

Eduo:
Right. One night, I got an idea that clip:rect’s style sheet is useful for these animations, and I tried it. I was surprised with 3GHz CPU’s speed and JavaScript’s power. You know, a traditional raster scrolling tech have been provided for 3MHz CPU(Z80/6502) more than 10 years ago.

Marle:
Thank you! I fixed the error which might be a kind of April fool. ;-)

Comment by Yusuke — April 21, 2006

Great job, Yusuke.

Comment by sundew — April 21, 2006

A better question might be, why does April have 31 days?

Nevertheless, it’s definitely an interesting pair of proofs of concept. Good to see that somebody remembers their trigonometry, too.

Comment by Keith — April 22, 2006

I remember when that amazed me on Commodore 64 and Amiga and there were some DHTML “scene” demos in the past (I wrote a Commodore 64 sprite editor in DHTML for Netscape 4 in 1999, that was totally useless but keyboard driven and animated and stuff)

http://www.pouet.net/prod.php?which=5618
http://www.pouet.net/prod.php?which=18327
– Hau Strange / Haujobb: http://www.scene.org/file.php?file=/demos/groups/haujobb/dhtml/hjb_hast.zip&fileinfo

How about we re-invent all the old goodies in modern JavaScript? I start with dividr:

http://icant.co.uk/sandbox/dividr.html

– unobtrusive
– uses object literal
– people will call it AJAX, I’m sure
– If you add a way to upload own colour settings, it’ll also be web2.0!

jesting aside, nice piece of code which proves that making heavy animation fluid in JavaScript is a really tricky thing to do.

Comment by Chris Heilmann — April 22, 2006

Cool, just split things into small blocks and then re-display them in all possible ways. I think it can be extended into other cool effects (like sphere in&out effects) if the speed is admitted.

Comment by josson smith — April 22, 2006

Keith:
Thank you again! I fixed the error which could be a kind of oriental mystical calenders?

Comment by Yusuke — April 22, 2006

There are some cool Javasript effects on on browser demo releases of the Assembly Party. Most notably the winners of browser demo compo’s of years 2005 and 2004, both made by a guy called Shingebis. And I bet these have already been here at some point :)

Comment by Markku Uttula — April 23, 2006

Leave a comment

You must be logged in to post a comment.