2

I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.

If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.

How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.

Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.

L84
  • 42,350
  • 55
  • 167
  • 243
  • Hi I think this belongs on superuser as it's not a programming question. – suspectus Mar 23 '14 at 22:08
  • @suspectus - How do you get that? I am asking how this is done. IE: The javascript code or an explanation so I can try to replicate the effect. I edited my question. – L84 Mar 23 '14 at 22:13

2 Answers2

8

The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history

rscheibinger
  • 161
  • 1
  • 3
  • Very cool! I will have to look into this. Thank You for the answer. – L84 Mar 23 '14 at 22:16
  • For more information about that and how this works in browsers which doesn't support pushState() see [this Q&A](http://stackoverflow.com/a/136506/2236166) – morten.c Mar 23 '14 at 22:17
  • For the same reason I recommend as well: [caniuse](http://caniuse.com/#feat=history) – rscheibinger Mar 23 '14 at 22:25
  • I was about to post the same link. If you don't mind dropping support for IE 9 and below I don't see why this can't be used now. => – L84 Mar 23 '14 at 22:27
  • In that case it should be completely fine for you to use it. – rscheibinger Mar 23 '14 at 22:31
1

The trick this page does to move from page A --> page B involves 3 main steps:

  1. Load the whole page B or only the content that is different from page A (probably using XMLHttpRequest).

  2. Swap in the changed content (e.g. updating the body,..)

  3. Update the browser location bar with the URL of page B without refreshing the page, using a particular HTML5 history method called pushState.

anh_ng8
  • 1,020
  • 10
  • 16