0

The site in questions is the newly released http://mry.com/. And I am absolutely stumped. The page transitions work even with the forward and back arrows, and it seems that the header image and navigation is only loaded once, even though it appears the URLs change as in a standard site structure. I think it may be an asynchronous ajax load, but how is this accomplished without the hashbangs? Any insight would be greatly appreciated.

Afs35mm
  • 549
  • 2
  • 8
  • 21
  • 2
    Animated page transitions are a horrible, awful, obnoxious throwback to the days when websites used blink tags and animated gifs to impress the monkey brains of their visitors instead of providing them with a useful, intuitive interface to access the INFORMATION they came there for. Please, please, please please don't ever use them. Ever. – Blazemonger Jun 19 '12 at 17:29
  • This site is a good example of what you MUST avoid. Getting how to go to content took me a minute... I don't want to study their transitions... – Denys Séguret Jun 19 '12 at 17:30
  • I think that is a really cool website. There is not much information that company needs to give out other than get people excited about their design and advertising talent. – Jis Ben Jun 19 '12 at 17:51

1 Answers1

1

HTML5 History API

You can use HTML5 History API.

history.pushState()

Calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But, also pushState() has other few advantages.

window.popState

As for window.popState:

A popState event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState() or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

Browsers compatibility

You can find a contributed wiki about the status of the HTML5 History API here.

Polyfills and others

pjax and History.js seems to be a great alternatives.

The GitHub Tree Slider post is a quick good read.

Alexander
  • 23,432
  • 11
  • 63
  • 73