Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Mimicking a flash site with CSS3 and JS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #195961

    I have a potential client who wants the same vertical, expanding nav menu / content area as thieves.ca. That site is based on flash, which I’d like to avoid for obvious reasons. Clicking on “Events” after the loading animation shows the desired effect. I have an experiment going on here. Clicking “Method 1” will show you as far as I’ve gotten.

    Issues with this solution:

    • The text in the expanding panel reflows as the panel opens. It would be ideal to have the text just fade in after the panel opens, instead of reflowing during the expansion.
    • Client wants background image to change based upon which nav item is clicked on
    • Can’t figure out how to trigger the animation on page load instead of click.

    I’m thinking that the best way to approach this is to set up a different page for each nav item and have the expansion get triggered on page load. That way, the background image can be set independently for each page (rather than calling a new image with some kind of JS or CSS3 animation on one page), each of which can be pretty small since background images wouldn’t need to pre-load. I’m pretty new to animation, and honestly I don’t really like it as a design element, but it is something I’d like to get more comfortable with. Plus it’s in demand. Anyway, any help or insight would be appreciated. I’m a JS novice. I’m good with HTML and static CSS.

    #195967

    I have uploaded this to codepen:

    http://codepen.io/sistercylon/pen/WbMYEV

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.