flash like page transition in/out with Jquery

Question

Hi I am planning a showcase site for digital agency.

I would like to know if this flash like effect can be achieved with jQuery.

When user clicks a main nav element - animate page content out, load new content in the background and when that new page has fully loaded animate into view.

I have found a site that seems to achieve this but if anyone can help break down whats going on here I would be very grateful. http://imagemechanics.com.au/

Many thanks in advance.

Answer 1

Hm i dont have the time to show a a working example but i can tell you what you have to do to make this work

at first you need the upfading animation, just animate the css top to a value that completly hides the content from the page, so if top:0 would be the div on the top page try to move it to top:div.height

second position the div under the page viewport bottom:0 beeing the page bottom. bottem would be page.height + div.height

now start an ajax request that gives you the new content of your content div. just .append(newtext) and move the div to top:0 again, evoila your new page is here,

this all requires the content div to be positioned absolute and your page to have a fixed height with overflow hidden, else you would see a scrollbar when changing pages.

just try a little and ask again if you got any problems!

i woud recommend to use the css animation jquery plugin for the css transitions.