HTML Page Transitions

Question

On the site http://canvas.co the pages seamlessly change

Looking at the code in developer view; when I change page, the code itself doesn't even seem to re-load, its as if the element which holds all the content, just loads the new content, leaving the other elements intact

Another thing I've noticed is that when I view the source, there is actually very little information there. If I search some text which the browser renders on the page, it's not in the source. (Although I'm pretty sure it isn't) It feels as if I'm viewing the source for an iframe and not the actual document

I considered that it might just be one long page - but that's not the case, and I don't want to do it this way as I want my content to have the a different URL for each "page"

Any ideas what's happening and how I too might implement such a seamless page change?

Answer 1

The reason there is little code viewable is that the majority of it appears to be being brought in via external files (JavaScript "includes" if you will).

As for the transitions, the site is what is known as a "State Based" site, whereby the site itself is contained within 1 page, and all of the contents is loaded at once. This is easily achievable using jQuery animations, as you simply load all the content, hide everything but the home page's content, and then animate the home page away, and the destination page in, as the user uses the page.

Hope this helps!