Smooth seemless web page transitions
I'm just wondering how this particular site accomplished their webpage transitions.
If you click on "home", it takes you back to the homepage, the main content slides to the side, whilst the new content is loaded in, almost as if they were on the same page. There is no white gaps or anything which suggests it loads the entire page again, yet the URL is changed as well.
Anyone have any ideas on how they did it?
on slow internet conections (like for example mine) this site doesn't load properly at all (i tried Firefox as they suggest) and some of their content is not cross browser because i have this banner in Opera
xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
I agree, unfortunately the demo site is not working properly.
Very interesting topic though!
Found this fiddle on jQuery "animate()": http://jsfiddle.net/k_rma/VmSX4/
(a really low-level example)
It works on my desktop. Is that sort of what you mean, just smoother and applying to entire pages?
Oh, it appears to load fine for me, I'm using Chrome. Its lag and stutter a bit on IE though.
I liked the way it took you from one page to the next without a reload of the page. When you click on a link, you can see the original content slide out and before it disappears completely, you can see the new content being brought in. At one instance, both the old and new content are on the same page, although very briefly. It creates a very nice illusion of simply flipping to a new page of the website.
I know about the jQuery animate function, the animation isn't what is intriguing me, it's how they handle the transition to another page without actually reloading the page. The url just changes without the page having to reload.
I know it's a bit hard to explain, but does that make it a bit clearer?
works better on Chrome, although it takes ages to load, yes.
They might be using the HTML5 History API (pushState / popState) to do the manipulation of the URL in the address bar coupled with dynamic injection of the content into the DOM...
Last edited by arvgta; 12-30-2013 at 08:04 AM.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)