Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Css3 ?

    Wonder if CSS3 transitions and transforms could do it?

    See for example: http://css3.bradshawenterprises.com/ demo http://css3.bradshawenterprises.com/transitions/ or
    http://www.the-art-of-web.com/css/css-animation/

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

  • #3
    New Coder djpaul1963's Avatar
    Join Date
    Apr 2012
    Location
    Athens GR
    Posts
    75
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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 (mouse over the LG banner)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •