Looking for best way to create this animated rollover effect..

Discussion in 'HTML & Website Design' started by dustincreative, Oct 14, 2012.

  1. #1
    Hey all,

    Working on a site, and I want to have three links that each have an animated rollover effect. I've created a SWF that does this, but I want to use HTML/CSS to pull it off if possible.

    You can view the SWF here - swfup.com/view/jlcv - sorry, due to my restrictions as a new user I can't post the live link, but I can't upload swfs either. Excuse the size also, it displays pretty small for some reason. The effect takes place when you roll over either of the two links above the grid.

    If it's too difficult to have the animated area shared by the three links, they could each have their own separate animation instead. Ideally they would have a rollover AND rollout animation. Worst case scenario is I make them all separate and use a simple rollover instead, with only two states.

    I would assume I could create a single jpeg with a series of frames, then use HTML5 maybe (with CSS?) to cycle through the specified frames upon rollover/rollout.. but I am not sure of their capabilities.

    Thanks much!
     
    dustincreative, Oct 14, 2012 IP