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

Home Forums JavaScript Animating div’s within a ‘slideshow/carousel’

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #153718

    Hi there,

    I’m working on a single page website. It’s 100% in height and width, with the content centred in the middle of the page. This content will include a menu for navigation and next to it a block where a product image and descriptive will be displayed. Clicking on a link in the menu will change what product is displayed. I’ve linked to a quick wireframe I’ve just done which will hopefully help explain the set up (couldn’t embed the image).

    What I’d like to achieve is: when a product it selected (clicked on in the menu), the image will slide up and fadeout and the div containing the title/text/button will do the same but move in a different direction. Once that animation is done a new product image and content will slide/fade in.

    Has anyone done anything like this before? I’ve tried to find a jQuery plugin or something but I can’t seem to find anything that does anything similar – any ideas? My basic understanding would be that when a link is clicked, a class of ‘active’ would be added to the corresponding panel. When this is added jQuery could move/animate the position and opacity from top: -200px; to top: 0; and opacity: 0; to opacity: 1; And it would do the opposite when a class is removed?

    Thanks in advance and I look forward to your help and advice :)


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