Topic: Clipping based animation example Pages that link to <a href="https://ozoneasylum.com/backlink?for=29826" title="Pages that link to Topic: Clipping based animation example" rel="nofollow" >Topic: Clipping based animation example\

 
Author Thread
argo navis
Bipolar (III) Inmate

From:
Insane since: Jul 2007

IP logged posted posted 01-01-2008 18:20 Edit Quote

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".

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-01-2008 19:17 Edit Quote

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.

mas
Maniac (V) Mad Librarian

From: the space between us
Insane since: Sep 2002

IP logged posted posted 01-01-2008 20:03 Edit Quote

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-01-2008 23:51 Edit Quote
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.

argo navis
Bipolar (III) Inmate

From:
Insane since: Jul 2007

IP logged posted posted 01-02-2008 00:34 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu