Плавный переход между страницами сайта. Как реализовать?

Question

[▪ ▪]

Уже давно заметил что многие умельцы делают интересные анимации при переходе на новые страницы сайта. Многие креативные агенства например. Те же примеры с behance и dribbble. И это не просто плавное угасание и появление которое легко можно реализовать с java sc. Здесь все намного сложнее. Посмотрите пример (выберите любой проект и он очень плавно загрузится в новую страницу): redcollar.ru

На сколько все это сложно реализовать учитывая что сайт делается на wordpress? Подгрузка новой страницы в основной? Нужно ли использовать adobe animate для таких сложных анимаций?

Answer 1

[Сергей Горячев]

https://s-sd.ru/files/ppcontent/index.html
https://s-sd.ru/blog_studio_design/plavnaya_smena_...
Делайте что хотите в качестве эффектов %)
По идее, это делается 10-15 строк jquery.
А логика у этого плагина простая, как 5 копеек.
1. Жмем на ссылку перейти по ссылке.
2. Страница откладывает переход, запоминая ссылку.
3. Сначала показывает эффект, потом скрывает всю страницу.
4. Потом уже переходит на другую страницу.
5. А на новой странице, просто идет плавная загрузка контента.

Comments

[▪ ▪]

Можно и так, но я все же заметил что сейчас многие подгружают контент на основную.

[Дмитрий Галанин]

Спасибо, очень помог!

[Айназ Қамбар]

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

Answer 2

[Антон Мудренок]

Сложно это все грамотно и красиво сделать. А сама технология несложная.
Загляните в dev-tools. Перезагрузки страницы не происходит, происходит несколько анимаций и смена контента. Смена контента происходит в блоке class = "content replacable". При смене контента, происходит вспышка и ре-рендер, и это заметно. Подгружается html для каждой страницы проекта заранее или асинхронно — не так важно, как через ajax можно подгрузить гуглится несложно. Для того, чтобы быстро вставить нужный нам html в блок, можно испольовать такую штуку.
Анимации сделаны(все или почти все) на css и запускаются сменой классов. Увидеть каждую из них очень просто если включить вкладку Animations в dev-tools:


upd: из либ они используют Swipe, skrollr, gsap и Three. Последняя похоже используется только для текстового эффекта на главной странице и занимает половину размера js билда =) В целом я бы не сказал, что они все клево сделали. 10 мб основной страницы сайта это перебор + видосики автоподгружаются с течением времени и кушают уже 65мб трафика. Мелкие картинки не в svg и не в спрайте, потому мы делаем около 50 запросов по ним. И т.п.

Comments

[account-6]

Да говнище тотальное, хуже сайтов "креативных агентств" вообще ничего нету. Понаделают свой пидерастический дизайн, а глянешь внимательней - кривость и убогость. О лапше джеквери я вообще молчу. Тьфу, нечисть.

Answer 3

[Сергей Кардашов]

Есть одна крутая платформа GSAP, с помощью нее можно анимировать что угодно и не сложно это все. Вот пример реализации на русском. В кратком содержании. Далее применяется технология HTML5 History Api.
Ну а дальше дело рук, нужно просчитать действия анимации и по ее завершению заменять история браузера. Ну а страницу соответственно подгружать или сразу при загрузки всей страницы или перед началом анимации через ajax.

Answer 4

[Анатолий]

Плавный переход, это минимум ajax.
Подгружается не вся страница, а только контент.
Например у Jquery есть функции fadeIn и fadeOut, можно и другими реализовать.

Жмешь на ссылку, отправляется запрос на подгрузку контента следующей страницы, в этот момент происходит "затухание" текущей страницы, контент подгружен, стартует функция "появления". "Сбалансировать" время между запросом контента и его получением можно гифкой ajax-loader.

Если это сделать не асинхронным запросом, получится "каша", ведь первая страница может потухнуть, а вторая еще будет в ожидании, так и вторая может не сразу открыться.
Хотя это можно сделать. Просто к клику вешаешь событие "затухание". Браузер пока ответ не получит от сервера, страницу не сменит. А на ready ДОМа каждой страницы (или только переходов), повешать появление . Будет самый простой эффект плавного перехода между страницами. Клик - затухание, пока браузер ждет ответ на клик - переход на новую страницу - появление контента. Если сервер быстро обрабатывает запросы, сайт оптимизирован, а у пользователя шустрый интернет, будет выглядеть как по настоящему.

Comments

[hotabmax]

Благодарю

Answer 5

[killmeslow]

You're welcome

Comments

[▪ ▪]

Там ведь только preloader в виде gif картинки можно выбирать. Можно ведь самому сделать на чистом css и пару строк js. Это не то.

Answer 6

[Aleksey Chernikov]

Хороший пример от codyhouse с демкой и объяснением.
Как отметил Sergey Goryachev, дело тут только в js. В вашем случае wordpress не придает какой-либо специфики - всё делается на фронтенде.

Answer 7

[McBernar]

Вы удивитесь, но большинство того, что выглядит как магия — на самом деле читерство :)
Вот выше Сергей совершенно верно описал. Нет каких-то сложных взаимосвязей между экранами, а есть просто две части анимации — проиграть первую перед переходом, проиграть вторую после перехода.

Comments

[▪ ▪]

При загрузке новой страницы происходит вспышка (весь контент исчезает на секунду оставляя фон белым). Так что не вариант использовать такое читерство. Слишком заметно.

[alvvi]

Рикко: ну вы ведь сами сказали, при загрузке. Обрабатывайте ивент загрузки и все будет нормально, это делается так же как любой обычный прелоадер.

[▪ ▪]

Илья Ростопка: это если делать читерство. Вспышка говорит о том что страница загружается по новой. Здесь же в примерах плавный переход. Значит происходит подгрузка контента а не всей страницы.

Answer 8

[I_Wizard]

Есть библиотека, с помощью которой можно реализовать то, что вам нужно. Называется barba.js . на русском инструкций я не нашел, но есть статейка на английском ( ссылка) . Мне кажется что там все понятно. Анимацию можно подставить любую. в примере - просто fadeIn и fadeOut используется.