CodingForums.com - View Single Post - Animation outside the stage? Seeking Advice.

Maclimes · 09-06-2012, 10: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!

Sam

09-06-2012, 10:55 PM	PM User \| #1
Maclimes New to the CF scene Join Date: Sep 2012 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Animation outside the stage? Seeking Advice. 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! Sam