Можно/целесообразно ли делать анимированные переходы в вебе?

Насколько проблематично с технической точки зрения будет реализовать анимированные переходы в вебе (какие угодно, ну вот, например, как в примерах по ссылкам: https://page-transitions.com/ (верхнее меню) или https://dribbble.com/shots/3124800-Rise-Course-Overview )?
Суть перехода - плавная, анимированная смена экранов интерфейса, а не когда все просто исчезает, а потом из ниоткуда появляется.

Интересует, возможно ли вообще создать относительно сложный портал с такими переходами? В частности, будет ли нормально подгружаться страница?
На ваш взгляд, как лучше всего это реализовывать?

Пишу работу на эту тему, в технической стороне вопроса пока не разбираюсь, поэтому для начала решила задать вопрос тут. Буду очень благодарна за ответ! :)
  • Вопрос задан
  • 2170 просмотров
Пригласить эксперта
Ответы на вопрос 4
@karambafe
Классный пример, спасибо, сохранил себе в закладки.

Тут сильно зависит от технологий, которые применяются в проекте. Если это стандартный серверный рендеринг, то такое сделать не получится. В данном же случае используется изоморфный фреймворк nuxt.js, который при переходам по ссылкам внутри проекта использует клиентский рендеринг, а при "прямой" загрузке страницы - серверный.
Именно за счет клиентского рендеринга можно хранить глобально определенные данные и делать такие смены интерфейса

Тут 2 подводных камня:
1. Красивые анимации - это всегда сложно и долго для тех, кто с ними плотно не работает.
2. Почти вся информация забирается с сервера, а значит надо при переходе на новые страницы постоянно делать запросы, выполняющиеся определенное время. В этот момент в интерфейсе желательно вставлять какие-то заглушки, которые потом аккуратно будут заменяться на новый контент.
Ответ написан
Если хотите попробовать, попробуйте barba.js, с помощью него можно сделать нормальные переходы между страницами (и не надо никакие SPA делать). В качестве инструментов для анимации (если сами писать не умеете или не хотите) могу посоветовать: tweenmax и другие решения (которые найдете там же).
Ответ написан
@magarif
Программист
Такого рода анимации предполагают работу без перезагрузки страницы. Если это какой-то контентный сайт, то возникнут сложности с подготовкой сайта к СЕО. Отсюда сильно возрастет ценник на разработку. Не знаю, готов ли кто-нибудь переплатить за красивые анимации, а потом еще переплатить за SSR. А потом еще год отлавливать баги)
Ответ написан
lukoie
@lukoie
В примере первая ссылка это просто слайдер, только так грамотно оформленный. Это не сложно, тут просто слайдер употребили офигенски с креативом, реализовали на вьюжс(можно даже по фавикону увидеть), и динамически грузят данные.
(кстати, вот тут рассказывают об этом проекте: https://css-tricks.com/native-like-animations-for-...

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы