Веб анимация в деталях. Часть 2: Глобальные взгляды на веб дизайн и все о CSS Transitions или анимированных переходах между страницами

Если вы думаете, что Web design это просто создание сайтов, вы попали во временной разлом, выпали из реальности и вам срочно необходимо обновление базы данных.

Web design - это искусство. К тому же, очень актуальное и важное в условиях тотально развивающегося креативного общества с его рекламными аппетитами и потребностями в создании и продвижении новых брендов. И относиться к нему стоит не только как к решению проблем своего бизнеса, а как к рекламному инструменту обладающему особой силой. 🚀

За более чем 20 лет истории веб анимации сайт из просто странички с основной информацией превратился в настоящий шедевр: технический, визуальный и маркетинговой. Функциональный, красивый и эффективный. И во многом он такой благодаря инструментам веб анимации, которым мы и посвящаем небольшую серию статей.

В этой мы поговорим об анимированных переходах или CSS Transitions. Но мы рассмотрим их не с позиции способов разработки, а глазами потребителя, который следит за трендами. 😎

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

🛰 Еще Джордж Лукас в первых эпизодах «Звездных войн» делал это во время смены кадров.

Популярными в веб дизайне переходы стали в 2016. И если вы думаете что все так просто, нажал на большую кнопку – перешел на новую страницу сайта, знайте – нет.

Только не в 2019, когда интересный сайт это целый живой организм.

Может возникнуть вопрос: “ Зачем пользователю знать о таких деталях?”. Знание трендов, технологий, инструментов помогает по новому посмотреть на продукт веб разработки и возможно избежать бытующих субъективных мнений типа: мне не нравится, слишком много всего, мигает, зачем все эти движущиеся детали и прочее в этом роде. Возможно знание этих деталей расширит вашу зону комфорта, вы вступите в дискурс о трендах веб дизайна и казавшиеся непонятными и лишними элементами станут понятными и интересными.

Итак, переходы или транзишины бывают разные и классифицировать их мы будем по 2 критериям: когда происходит переход и как он происходит.

👉 Когда происходит переход:

• При скролле горизонтальном или вертикальном.

• По нажатию на один из элементов сайта.

• При наведении.

• Автоматическое появление или исчезновение информации на сайте.

👉 Как происходит переход:

• Когда вы нажимаете на элемент сайта, например меню, картинка, которую вы видите во время перехода от оглавления к содержанию не имеет четкой формы.

• Эффект глубины резкости, когда новая страница появляется как бы из глубины сайта, создавая перспективу движения.

• Анимация словно шпионит за вами и картинка меняется в той части сайта, в которой вы находитесь, всплывая за движением курсора.

• Картинки меняются с высокой частотой, ритмично и автоматически, независимо от ваших действий.

• Анимация появляется плавно с верхней или нижней части сайта и движется строго по вертикали.

• Анимация плавно и продолжительно движется по горизонтали.

• Переходе на новую страницу происходит в разных направлениях, страница может вращаться вокруг своей оси, закручиваться по направлению к вам или от вас, менять позицию.

• Переход выходящий на вас из перспективы, проще говоря - наезд.

• Переход может выглядеть как множество разных геометрических фигур и блоков, движущихся и меняющихся местами.

• После плавной смены картинки, появляется еще один элемент с эффектом параллакса.

Но и здесь все не так просто, все эти эффекты можно комбинировать. Также, можно регулировать скорость переходов их частоту и интенсивность, что тоже повлияет на конечное изображение. Задача всех этих приемов – сконцентрировать внимание, задержать пользователя на сайте.

Изначально, анимированные переходы были задуманы как интересная и функциональная деталь в сторителлинге.

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

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

Но если все пошло по плану, ваш взгляд на веб-дизайн больше никогда не будет прежним. 🤔