3

How do sites like this change urls seamlessly?

If you scroll on this link it animates a transition and the url changes from:

http://www.e-types.com/

to

http://www.e-types.com/work

And if you click the logo it transitions back without any flicker or loading time. Any ideas what method they're using?

Thanks for your time.

meow-meow-meow
  • 508
  • 2
  • 10
  • 26
  • 1
    Refer this : http://stackoverflow.com/questions/14660580/change-url-when-manually-scrolled-to-an-anchor – Harsha W Apr 18 '17 at 04:12
  • Refer @HarshaW answer to accommodate your query please. :) – CodeMonkey Apr 18 '17 at 04:21
  • Possible duplicate of [Change url when manually scrolled to an anchor?](http://stackoverflow.com/questions/14660580/change-url-when-manually-scrolled-to-an-anchor) – Harsha W Apr 18 '17 at 04:22
  • @HarshaW It's not the scrolling url change that I was wondering about, it's the seamless animation while a new url loads, for example when you click on these projects: http://www.buildinamsterdam.com/cases – meow-meow-meow Apr 18 '17 at 04:23
  • pushState, most likely: https://developer.mozilla.org/en-US/docs/Web/API/History_API – Tieson T. Apr 18 '17 at 04:31

1 Answers1

2

The idea behind is that there is only one page (single-page application).

The change in URL is handled by the History API, as mentionned in the comments : https://developer.mozilla.org/en-US/docs/Web/API/History_API

But it only changes the address, it does not actually load a full document. So the javascript can do any transition it wants on the content.

There is plenty of libraries that offer this feature.

More specificly, the linked site uses AngularJS.

You can find a complete example of ng-animate + router at this address: https://github.com/cornflourblue/ng-animate-ui-router-example

Depending on what you need, you can use a simple scroll with: https://github.com/oblador/angular-scroll

You can also do similar things with other popular tools:

FitzFish
  • 8,557
  • 2
  • 30
  • 39