Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
09-06-2012, 10:55 PM #1
- Join Date
- Sep 2012
- 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).
Does anyone have any other options, or advice as to which option to use? I appreciate the input. Thanks!
09-07-2012, 12:47 AM #2
- Join Date
- Jul 2008
- Thanked 13 Times in 13 Posts
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, 10:18 AM #3
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)
See an example here (mouse over the LG banner)