#javascript #jquery #animate #pjax
Начал подробнее изучать вопрос построения сайта без перезагрузки страниц. Первым
делом поработал с чистым PJAX. Затем с его аналогом Barba. Второй мне показался более
удобным с точки зрения создания анимации. Однако, он имеет ряд недостатков. Нельзя
применить скрипт только к конкретным ссылкам, нельзя описать анимацию для разных ссылок.
Например, для навигации обычный fade-эффект, а для страницы новостей - смещение при
переходе влево и вправо (пример). Так же, было бы неплохо перезагружать некоторые скрипты
после отработки анимации перехода, например, стартовать слайдер на загружаемой странице
и т.д..
Сейчас планирую перейти к smoothState. Беглый осмотр показал, что она так же хорошо
подходит для создания анимации перехода по страницам и имеет множество гибких настроек.
Но, руки еще не дошли)
В общем-то вопрос следующий. Если у кого-то есть опыт в этой области и готовые примеры,
буду весьма признателен. Что хотелось бы увидеть в примере:
Плавный переход при переходе по основному меню.
Отличающийся стиль перехода на странице материала, например, смещение влево и вправо
(самый простой вариант был бы через использование библиотеки animate.css).
Перезагрузка выбранных скриптов и других тегов в шапке сайта.
Сделал чистый пример, для удобства размещения скриптов и тестирования результата.
Так он выглядит:
Test project
Content
Если готовых решений ни у кого не окажется, свои результаты я естественно опубликую
попозже.
Ответы
Ответ 1
Ваше исследование сподвигло на установку такой системы на свой сайт. Остановился на smoothState, на чем стоит заострить внимание: 1. Различные анимации на различные типы переходов. Достигается без проблем с помощью обработчика события onBefore: function($anchor, $container) $anchor - это jQuery объект с ссылкой, на которую нажали. Те. мы можем определить и класс ссылки, и адрес href и на их основе указать какую нам нужно анимацию. Например, добавив соответствующий класс на контейнер страницы, или сделав анимацию через jQuery animate. Но есть одно но. Это не сработает при переходе по истории. Будет какая-то стандартная анимация на кнопку Назад браузера 2. Смена контента вне контейнера страницы. В стандартном функционале нет, но в принципе достижимо правкой исходника. Например, мне нужно было менять класс тега от страницы к странице. Пришлось залезть в исходный код и поменять кое-что. Вдохновлялся этим. 3. Глюки при движении по истории, если вы тоже добавляете history.pushState() К сожалению, возникают ошибки, если вы тоже добавляете что-то в историю. Я добавляю якорные ссылки при переходе по главам статьи, что в дальнейшем вызывает ошибки у smoothState. Но, думаю, их тоже можно устранить.
Комментариев нет:
Отправить комментарий