Topic: Clipping based animation example (Page 1 of 1)

Hello world.

It's on http://www.beyondwonderland.com

Once the page has loaded, type "javascript:start();" in the url, hit return and there you go.
The page itself will go straight to my vault once the complete redesign and relaunch of beyondwonderland.com is over.

So I figured it could be good to post it *now*, as is, for reference, download, rippage.

Short explanation :
To offer a consistent dataflow, the script obeys a structure similar to java applets.

SOoo.. the "page loaded" event triggers an "init" function which, once it is done with initialisation,
calls a "start" function : that function will create an interval (sort of javascript thread) for the timed execution of the animation bits.

That's the outline, and the "recipe" of most of my animation scripts - or others : for a runnable program, it is always a good idea to maintain
control of the action based on a timer.

Runnable, as opposed to "event driven".

Using CSS clip and computing the window's resolution seems overkill. It'd be a lot easier to use a background image and simply size the container using percentages.

I realize it's a "just for fun" script, but the global namespace is cluttered here.

Just my 2 cents.

off topic: may i ask from where you got the image? it's beautiful.

quote:

---

mas said:

off topic: may i ask from where you got the image? it's beautiful.

---

Looks like something from http://eso.org/ or NASA.

Google + Hubble.

To be specific, although the above is the exact query I used and dug through, you can find some Hubble info on "Carina Nebula"
here : http://hubblesite.org/newscenter/archive/releases/2007/16/image/a/

And more, higher res pics.

What's really stunning about this image is that you can have a super size display, and it will still occupy the whole and...
It is REAL.

It's a photo : nebulas are fascinating to me because they are "star nests", and several light years big - basically, this picture, no matter it's size,
represents something that can contain billion times the whole earth, and that constantly sees nuclear fusion starting, as stars depart from the nest to feed whole solar systems with...

(what I refer to as my "God" : LIFE).

-------------------------------------------------------

Back to earth with poi's points :
>> It'd be a lot easier to use a background image and simply size the container using percentages.

Yeah, I know there are gazillion ways to do it, or any effect, as my 20 liners "sub entries" for this month show.

I wanted :
a) to get familiar with js again after two years doing nothing worthy of interest with it
b) I wanted that exact pacing for the animation, wanted to control each pixel
c) I wanted to test some browser possibilities and limits : clipping, how fast clipping works, does it work consistently across browsers, does it imply "css tricks"
(it does : it works a lot better across browsers when applied to a div containing an image).

Furthermore, for big scripts like this, I like hacks that are robust - eg. resist over time, and I like to lay out the script in a readable
/maintainable way.

So there were reasons, yup, but thanks for the two cents nonetheless.