View Full Version : Animation outside the stage? Seeking Advice.

09-06-2012, 11:55 PM
Warning: I'm relatively new to web design.

My page is coded in mostly PHP, with small elements of JS thrown in here and there.

I want to add a section on the page that, when clicked, will cause the animation to spill outside the section briefly. In this case, they are going to click on a stone wall, breaking it, which will cause broken pieces of stone to cascade down briefly, outside the wall section of the page. The chunks would fall over the other, regular elements of the page briefly before disappearing from the bottom edge of the screen. I want those other page elements to still be interact-able.

My boss insists Flash is the best way to do this, but I thought Flash animations were restricted to their own section of the site, preventing this "overflow" option.

Another option was to create a big animated gif that would rain the rock chunks down, and simply set it to the front with z-index, destroying the gif after it played. This is not as ideal, since the transparency on gifs are so limited, the filesize would be so large, and the elements "behind" the gif would become temporarily unclickable (since the image would be in front of them).

Another option is to use Javascript to change the y-coordinates of individual chunks over time, causing them to "fall" down the page.

Does anyone have any other options, or advice as to which option to use? I appreciate the input. Thanks!


09-07-2012, 01:47 AM
Wonder if CSS3 transitions and transforms could do it?

See for example: http://css3.bradshawenterprises.com/ demo http://css3.bradshawenterprises.com/transitions/ or

Trying to visualize Flash, imagine the overall movie size would have to big enough to encompass the falling elements and have a transparent background.

09-07-2012, 11:18 AM
This type of interaction banner is called expandable webover.
The basic functionality is as follows:
You place a small flash banner on your page (like 100X50 or whatever)
On mouseover (or click) on this banner, flash informs the page javascript by calling an ExternalInterface function call to expand the div holding the swf to something bigger (or even the full page) so the flash will have all the space it needs to do the fancy things you describe.
See an example here (http://demo.dfs.gr/lg/) (mouse over the LG banner)