4

Начал подробнее изучать вопрос построения сайта без перезагрузки страниц. Первым делом поработал с чистым PJAX. Затем с его аналогом Barba. Второй мне показался более удобным с точки зрения создания анимации. Однако, он имеет ряд недостатков. Нельзя применить скрипт только к конкретным ссылкам, нельзя описать анимацию для разных ссылок. Например, для навигации обычный fade-эффект, а для страницы новостей - смещение при переходе влево и вправо (пример). Так же, было бы неплохо перезагружать некоторые скрипты после отработки анимации перехода, например, стартовать слайдер на загружаемой странице и т.д..

Сейчас планирую перейти к smoothState. Беглый осмотр показал, что она так же хорошо подходит для создания анимации перехода по страницам и имеет множество гибких настроек. Но, руки еще не дошли)

В общем-то вопрос следующий. Если у кого-то есть опыт в этой области и готовые примеры, буду весьма признателен. Что хотелось бы увидеть в примере:

  1. Плавный переход при переходе по основному меню.
  2. Отличающийся стиль перехода на странице материала, например, смещение влево и вправо (самый простой вариант был бы через использование библиотеки animate.css).
  3. Перезагрузка выбранных скриптов и других тегов в шапке сайта.

Сделал чистый пример, для удобства размещения скриптов и тестирования результата. Так он выглядит:

<!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>

Если готовых решений ни у кого не окажется, свои результаты я естественно опубликую попозже.

1 ответ 1

1

Ваше исследование сподвигло на установку такой системы на свой сайт. Остановился на smoothState, на чем стоит заострить внимание:

1. Различные анимации на различные типы переходов. Достигается без проблем с помощью обработчика события

onBefore: function($anchor, $container)

$anchor - это jQuery объект с ссылкой, на которую нажали. Те. мы можем определить и класс ссылки, и адрес href и на их основе указать какую нам нужно анимацию. Например, добавив соответствующий класс на контейнер страницы, или сделав анимацию через jQuery animate.

Но есть одно но. Это не сработает при переходе по истории. Будет какая-то стандартная анимация на кнопку Назад браузера

2. Смена контента вне контейнера страницы. В стандартном функционале нет, но в принципе достижимо правкой исходника.

Например, мне нужно было менять класс тега <body> от страницы к странице. Пришлось залезть в исходный код и поменять кое-что. Вдохновлялся этим.

3. Глюки при движении по истории, если вы тоже добавляете history.pushState()

К сожалению, возникают ошибки, если вы тоже добавляете что-то в историю. Я добавляю якорные ссылки при переходе по главам статьи, что в дальнейшем вызывает ошибки у smoothState. Но, думаю, их тоже можно устранить.

1
  • Спасибо за ваши комментарии к вопросу. Я поковырял немного smoothState и пришел к выводу, что у barba.js намного более гибкий подход во всех отношениях. Без труда перезагружаются теги в <head>, без труда прикрутилась анимация. Впрочем, еще остаются нерешенными несколько проблем. Перезапуск скриптов внутри контейнера и запрет на воспроизведение группы ссылок внутри блока. Пример можно тут посмотреть. Как найду время на решение этих 2х вопросов, напишу ответ. Если что-то подскажите, будет вообще супер. 2 фев 2017 в 7:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.