www.webdeveloper.com
Results 1 to 5 of 5

Thread: Smooth seemless web page transitions

  1. #1
    Join Date
    Dec 2013
    Posts
    2

    Cool Smooth seemless web page transitions

    Hi,

    I'm just wondering how this particular site accomplished their webpage transitions.

    http://acko.net/blog/animate-your-way-to-glory/

    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?

    Regards

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    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

  3. #3
    Join Date
    Jan 2011
    Location
    Munich, Germany
    Posts
    237
    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?

  4. #4
    Join Date
    Dec 2013
    Posts
    2
    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?

  5. #5
    Join Date
    Jan 2011
    Location
    Munich, Germany
    Posts
    237
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles