Как сделать анимационный переход страниц?

Question

[Никита Нафранец]

Есть 4 главные страницы, нужно на них повесить переход как тут
tympanus.net/Development/PageTransitions (move анимации)
К сожалению урок не учит, как подключить ajax и делать это со страницами, а не контейнерами.
Баловался с smoothState.js, подключил анимацию slideRight + slideLeft. Выглядело похоже, но есть огромная белая полоса между переходом. Я пришел к выводу, что не достаточно подмены контента, нужно загружать сразу две страницы заранее, чтоб переход был возможен, но к сожалению, не нашел там способа так сделать.
Ставлю сайт на modx. Как это сделать? Что делать? Заранее спасибо.

Answer 1

[devstudent]

а почему не поместить все в один html, чтобы каждая страница представляла собой блок высотой с экран, и тогда можно делать анимированый скролл всместо перехода на другую страницу

Answer 2

[zooks]

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

Comments

[Никита Нафранец]

safetyleaders.ru вот html версия сайта, я не представляю как вывести все через pdoResources. Извращение же какое-то получится.

Answer 3

[Сергей Волков]

Если новая страница формируется из данных полученных ajax запросом, то перед запуском анимации перехода надо подготовить новую страницу: получить данные аяксом, в отдельном блоке сформировать новую страницу, запустить анимацию перехода. После этого возможно придется стереть блок с предыдущей страницей.
Такие переходы проще делать в одностраничных веб-приложениях.
Еще сложность может возникнуть с некоторыми элементами, которые общие для обоих страниц (хидер, сайдбар, ...).