Как делаются такие плавные переходы между страницами как на сайте ru.silasveta.com/?

Question

[edu30151]

Здравствуйте!
Как делаются такие плавные переходы между страницами как на сайте ru.silasveta.com ? Наверняка есть готовые плагины, а не самому через ajax вручную писать. Второй момент который интересует очень много плагинов которые переключают якобы страницы, а на самом деле это просто переходы между блоками на одной странице. На данном сайте переходы по разным урлам. Как это делать?
Заранее спасибо!!!

Comments

[Антон Цепковский]

html5 history api - изменение урла не значит, что делается запрос на сервер

Answer 1

[Владимир Голосай]

При клике по ссылке делается не переход на нужную страницу, а происходит подгрузка контента с помощью ajax запроса. При успешном получении контента (это может быть просто html верстка или json с контентом). В случае если контент подгружается с помощью json, то делается еще один запрос для подгрузки шаблона, в который контент будет выведен.
После вывода контента происходит смена фона с css3 анимацией и добавляется в историю браузера с помощью html5 history api новая страница. Таким образом перезагрузки страницы не было, но в истории и адресной строке уже новый url.

Comments

[edu30151]

А есть где нибудь может пример? В коде проще разбираться. Да и спасибо за ответ!

[trushka]

edu30151, можно по history api погуглить, обязательно примеры нагуглятся

[Владимир Голосай]

edu30151:
Вот старенькая статеечка, но пример именно с подгрузкой контента: astrio.ru/blog/History-API
А вот поновее про history api: https://css-tricks.com/using-the-html5-history-api/