Начал подробнее изучать вопрос построения сайта без перезагрузки страниц. Первым делом поработал с чистым PJAX. Затем с его аналогом Barba. Второй мне показался более удобным с точки зрения создания анимации. Однако, он имеет ряд недостатков. Нельзя применить скрипт только к конкретным ссылкам, нельзя описать анимацию для разных ссылок. Например, для навигации обычный fade-эффект, а для страницы новостей - смещение при переходе влево и вправо (пример). Так же, было бы неплохо перезагружать некоторые скрипты после отработки анимации перехода, например, стартовать слайдер на загружаемой странице и т.д..
Сейчас планирую перейти к smoothState. Беглый осмотр показал, что она так же хорошо подходит для создания анимации перехода по страницам и имеет множество гибких настроек. Но, руки еще не дошли)
В общем-то вопрос следующий. Если у кого-то есть опыт в этой области и готовые примеры, буду весьма признателен. Что хотелось бы увидеть в примере:
- Плавный переход при переходе по основному меню.
- Отличающийся стиль перехода на странице материала, например, смещение влево и вправо (самый простой вариант был бы через использование библиотеки animate.css).
- Перезагрузка выбранных скриптов и других тегов в шапке сайта.
Сделал чистый пример, для удобства размещения скриптов и тестирования результата. Так он выглядит:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test project</title>
<link type="text/css" rel="StyleSheet" href="style.css" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="" />
</head>
<body>
<header class="header">
<nav>
<ul class="uMenuRoot">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About us</span></a></li>
<li><a href="contacts.html"><span>Contacts</span></a></li> </ul>
</nav>
</header>
<main>
<section class="middle">
<ul class="page-nav clr">
<li><a href="news1.html">News 1</a></li>
<li><a href="news2.html">News 2</a></li>
<li><a href="news3.html">News 3</a></li>
</ul>
<p>Content</p>
</section>
</main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>
Если готовых решений ни у кого не окажется, свои результаты я естественно опубликую попозже.