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).
http://postimg.org/image/lfd5tj491/
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 :)
Steve
