Анимация на сайте как сделать
Перейти к содержимому

Анимация на сайте как сделать

  • автор:

Как добавить анимацию на сайт и не облажаться

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

Методы и ограничения

Показать анимацию на экране пользователя можно несколькими методами.

  • Видео. Много весит и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
  • GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
  • Набор последовательно переключающихся картинок, они же — секвенции. Грубо говоря, это видео без сжатия кадров, которое также много весит и замедляет работу браузера.
  • Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

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

Чтобы воплощать на сайтах все наши задумки, требовался новый инструмент, который снимет ограничения. О нём мы расскажем подробнее.

Библиотека Lottie

В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.

С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.

На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.

Преимущества

Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.

В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.

За дизайн сайта RBK.money мы получили награды:

  • Tagline Awards 2019Серебро Лучшая B2B-кампания
  • Рейтинг Рунета 2019Серебро Финансы, инвестиции, банки
  • CSS Design Awards 2019 Special Kudos / UI Design / UX Design / Innovation
  • Awwwards 2019 Honorable Mention

Анимация страниц сайта, которая нравится всем

Продуманная и уместная анимация страниц сайта не только радует глаз, но и серьёзно помогает в работе. На сегодняшний день её можно без преувеличения назвать одной из основ web-дизайна – и действительно, ни один современный ресурс невозможен без неё, ведь на ней нередко основано взаимодействие с пользователем. Последнее стало возможным благодаря тому, что анимация информирует о тех или иных состояниях страницы или же направляет внимание в нужное русло. Из-за её популярности весьма распространены ситуации, когда её используют неправильно… И результаты получаются прямо противоположными ожидаемым: она вызывает раздражение, непонимание или же откровенную скуку у пользователей. Не удивительно, что многие разработчики задаются вопросом о том, как сделать анимацию на сайте, которая будет к месту и нравиться пользователям.

Виды анимации, которые используют на веб-сайтах

Удивительно, но факт: обозначение «анимация» произошло от латинского слова “anima”, которое переводится как «душа» или «жизнь». И действительно, движение на картинках оживляет и, даже возможно, в какой-то степени одухотворяет в восприятии смотрящего. Можно посмотреть на это явление и под другим углом: благодаря анимации вы можете вдохнуть жизнь в страницы Вашего сайта. Само собой, данное направление постоянно развивается, и если ранее для того, чтобы впечатлить пользователя, было достаточно самых простых GIF-изображений, то сегодня всё стало более серьёзным.

Объекты

Анимированные объекты в виде перемещающегося курсора, кнопок, которые меняют цвет или двигаются, являются самыми простыми решениями. Если ранее для их реализации использовали яркие, привлекающие внимание пользователя цвета, то сегодня – натуральные цветовые решения, чёткие крупные шрифты и лаконичный дизайн.

Текст

Чаще всего анимированный текст выглядит как бегущая строка или заголовок. Их используют для выделения ключевой информации, к которой нужно привлечь внимание пользователя. Ключевые приёмы – изменение цвета, вращение, скольжение, мигание, прочее.

Изображения

В зависимости от тематики сайта или ситуации это могут быть баннеры, расположенные на главной странице, или же slide-show или фотографий. Первые могут вести не только на внутренние страницы, но и в блог компании или же на товарные карточки. Что касается вторых, то они станут идеальным решением в тех случаях, когда именно фотографии являются продающим элементом. Это актуально для сайтов, которые торгуют обувью и/или одеждой или же предлагают туристические услуги.

Разрабатываем дизайн
Создаём удобные и простые интерфейсы, которые помогают компаниям развиваться в цифровой среде

Видеоролики

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

Секвенции

Данное обозначение произошло от английского слова “sequence”, которое переводится как «последовательность»… И действительно, особенность данного решения заключается в демонстрации комплекта отдельных изображений за определённый временной промежуток. Таким образом создаётся иллюзия движения. При этом, в отличие от видеороликов, возможность заменять отдельные кадры или удалять те из них, которые более не нужны, здесь есть. Помимо этого, дизайнер может выбирать количество кадров и их качество.

Функции, которые выполняет анимация

Давайте разберёмся с тем, для чего именно на сайте нужна анимация. Перед тем, как создавать её, нужно чётко определить для себя её назначение.

Прелоудеры, или режим ожидания

Английское обозначение “preloader” переводится как «предзагрузчик». Последний представляет собой индикатор, который информирует пользователя о том, что на данный момент страница загружается. Интересный прелоудер, оформленный в тематике сайта, не только привлекает внимание пользователя, пока тот ждёт загрузки, но и скрывает изображение страницы, пока та загружается.

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

Storytelling и создание настроения

Создать анимацию в качестве приветствия на сайте – ещё одно отличное решение. При правильном подходе она создаст у пользователя определённое настроение и сделает восприятие информации более полноценным. Что касается сторителлинга, то он может дополнить информацию о компании или продемонстрировать то, как работает её продукция, куда проще и доступнее, чем просто изображения и текст.

Декоративная анимация

Что такое декоративная анимация страниц сайта? Это – самые разные решения, начиная с сообщений об ошибках и заканчивая видеовставками или оригинальными скроллами страницы.

Несмотря на название «декоративная», данная анимация необходима не только для красоты. Она привлекает и направляет внимание пользователю к тому, на чём создатели сайта делают акцент. Её цель – вызывать wow-эффект. В данном случае важно не перестараться, потому что большое её количество, наоборот, будет отвлекать от основной идеи.

Итог

Итак, какие именно выводы можно сделать из вышеизложенного? Они заключаются в том, что анимация способна:

  • Привлекать внимание пользователей сайта к тем или иным деталям (категории в каталоге или ключевая информация);
  • Выражать или, напротив, вызывать эмоции (к примеру, указать на ошибку или вызвать улыбку или же сожаление);
  • Делает навигацию по сайту более интересной. Забавные изображения помогут разобраться в структуре сайта и обеспечить комфортный переход по его разделам;
  • Мотивирует на целевые действия, повышает конверсию (особенно – в процессе регистрации, которая проходит в несколько этапов).

Способы сделать анимацию эффективной и интересной для пользователя

Многие специалисты в данной сфере советуют в первую очередь внимательно изучить принципы анимации, изложенные в книге «Иллюзия жизни: анимация Диснея», написанной американскими мультипликаторами “WaltDisneyAnimationStudios”. Они основаны на почти столетнем опыте работы аниматоров студии. Что касается других основ, то они – следующие:

  • Реалистичность с правильным отображением перспектив и теней, а также плавностью движений;
  • Не перегружайте страницу анимированными объектами, чтобы не отвлекать внимание пользователей от основной информации и не вызвать у них раздражения;
  • В последнем случае лучше всего индивидуально подбирать скорость для тех или иных движений, используемых в анимации;
  • Избегайте одновременной анимации сразу нескольких элементов, используйте вместо неё последовательную;
  • Учитывайте продолжительность анимации: она не должна быть слишком длинной, особенно – если это не оправдано ожиданием завершения того или иного процесса;
  • Создавая секвенцию, правильно настройте скорость показа кадров для того, чтобы их было комфортно просматривать;
  • Если нужно создать несколько элементов одного назначения, лучше всего использовать один и тот же стиль, одни и те же эффекты и одну и ту же скорость;
  • Задействуйте анимацию на тех элементах, с которыми пользователь взаимодействует чаще всего, но при этом сделайте её ненавязчивой и не отвлекающей, скажем, от заполнения форм;
  • Обязательно протестируйте своё творение на устройствах малой мощности, через разные браузеры, а также при недостаточно хорошем интернет-соединении.

Для того, чтобы анимация действительно удалась, нужно учитывать вкусы целевой аудитории сайта. Молодёжь однозначно оценит креатив и яркость, посетители постарше примут на «ура» понятную и наглядную анимацию, а для пожилых людей лучше всего использовать такие её виды, как анимация ожидания, подсказки действий и направление к конечной цели – регистрация на сайте или оформление покупки.

Приёмы повышения производительности

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

  • Не одновременный, а последовательный запуск анимаций, если их на сайте больше трёх;
  • Сведение к минимуму элементов на web-странице, упрощение её разметки;
  • Принудительная остановка повторного воспроизведения видеоролика, возможность самостоятельной остановки пользователем;
  • Подбор оптимальных битрейтов и их числа при воспроизведении видеоролика или секвенций (не стоит их делать слишком высокими или низкими);
  • Не рекомендуется использовать так называемые «слоёные» анимации, но если очень нужно, то лучше заменить их полупрозрачными изображениями;
  • Создавая анимации по технологии CSS, не изменяйте никаких параметров кроме трансформации и прозрачности;
  • Выведение анимаций в отдельный слой для того, чтобы при их изменении не были затронуты другие элементы;
  • Отказ от функций однократного и регулярного планирования вызова для сохранения синхронизации с устройством пользователя;
  • Сведение к минимуму или отказ от обращения к элементам посредством JS для исключения дополнительной нагрузки.

Другие «хитрости» от “SerpTop”, которые помогут вам справиться с созданием анимаций для сайта на «отлично»:

Задавание времени анимаций с помощью переменных в будущем позволит ускорить или замедлить их при необходимости;

  • Не забывайте использовать свойство “pointer-events” в CSS для того, чтобы контролировать события, при которых анимация может оборваться, то есть стать объектом события мыши;
  • Проверяйте готовую анимацию на низкой скорости для того, чтобы найти все имеющиеся в ней ошибки;
  • Учитывайте и используйте новые свойства браузеров при разработке анимаций (к примеру, свойство “@supports” продемонстрирует анимацию в том виде, в котором её увидит пользователь, и поможет устранить её недочёты.

Создание профессиональной анимации для вашего сайта – одно из направлений деятельности “SerpTop”. Обращайтесь к нам – и мы ответим на любые ваши вопросы, дадим рекомендации и поможем решить задачи любой сложности, связанные с его созданием или поддержкой.

Анимация на сайте. Свойство animation

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Синтаксис

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state; 

Наследование

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

Значения свойства

Значения animation могут быть комбинацией следующих параметров:

animation-name

Определяет название анимации, которое соответствует определенной группе ключевых кадров — @keyframes .

animation-duration

Задаёт продолжительность анимации в секундах или миллисекундах.

animation-timing-function

Определяет временную функцию, которая контролирует скорость и характер изменений во время анимации. Значения:

linear — анимация происходит с постоянной скоростью.

Игры с бесконечностью, или зачем нам infinity в CSS

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

  • 28 февраля 2024

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

  • 7 сентября 2023

Создание анимации для сайта — часть успешности проекта

Вслед за flat-иллюстрациями в тренды дизайна ворвалась анимация. Она начала появляться на все большем количестве платформ, принимать разные формы и быстро развиваться. Наступил момент, когда она перестала быть только украшением, а стала добавлять страницам интерактива, взаимодействовать с пользователем.

Нет, статья не о том, что заанимированные котики захватят мир. Мы поговорили со специалистами из Artjoker: Яниной — дизайнером и Наталией — руководителем отдела product-дизайна, чтобы рассказать о том, как анимация может повлиять на успешность проекта.

Зачем нужна анимация?

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

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

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

Янина кивнула и продолжила ответ коллеги: «Да, это не скучная статичная графика, а уже интерактивчик, из-за которого все выглядит живенько. Анимация действительно может использоваться для привлечения внимания и вовлечения пользователя. Еще она нужна, чтобы показать как работает какая-либо фича».

Как понять, что анимация необходима?

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

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

Может ли анимация выступать инструментом для повышения конверсии?

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

«Сразу в голову пришел сайт дизайн-агентства — если потенциальные клиенты видят, что у ребят крутой дизайн и анимация, у них точно повысится конверсия. Также полезно, если при помощи эффектов мы лучше объясним пользу продукта, особенности его использования или другие детали», — дополнила Янина.

Отдельного упоминания стоит вопрос со скоростью загрузки страниц веб-ресурса. CSS-анимацию часто используют для прелоадеров, которые помогают сократить время до «первого контакта» пользователя с контентом, что существенно снижает процент отказов. Множество людей просто закрывают вкладку, если сайт грузится дольше трех секунд. Анимация может помочь в этом или усугубить ситуацию в зависимости от профессионализма исполнителя.

Насколько анимация влияет на юзабилити?

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

«Хорошо, когда за нажатием кнопочки следует ответное действие. Существуют разные виды эффектов. Можно поставить просто крутящийся-летающий фон, но есть задачи и на взаимодействие пользователя с дизайном. Тогда кнопка превращается в новый элемент, потом появляется надпись — это супер-пупер», — подтвердила дизайнерка.

Актуальна ли Flash-анимация?

Если вы решили сделать флеш анимацию для сайта в 2019 году, что-то пошло не так. Эта технология давно мертва и ее пора списывать со счетов. Яна поделилась своей историей: «По-моему, этой технологией сейчас вообще никто не пользуется. Помню, у нас еще в универе была разработка флеш анимации, а потом нам через два года сказали: “Все, ребятки, сворачиваемся”, — давно это было. Flash мертв. Все используют After Effects».

Все, ребятки, сворачиваемся.

На смену тяжеловесному и проблемному флешу пришли инструменты CSS, существенно упростившие работу с графикой и снизившие вес страниц. Еще в 2017 году, Adobe — разработчики технологии, заявили о намерении отключить ее поддержку в 2020 году. После этого перестанут выходить обновления, а браузеры не будут считывать эту технологию. Можно смело заявлять, что создание флеш анимации для сайта — прошлый век.

Насколько распространена 3D анимация в вебе?

Создание 3D анимации требует больше ресурсов — как временных, так и финансовых. Помимо этого, ее использование налагает еще большую ответственность на специалиста, занимающегося оптимизацией веб-платформы. Все потому, что страница с 3D может весить гораздо больше, чем с 2D-анимацией, а значит отдалять время «первого контакта» пользователя с контентом и повышать риск отказа. Но этого не происходит если использовать подходящие инструменты разработки и бросить силы на оптимизацию.

Создать 3D анимацию на сайте можно в программах:

  • after effects;
  • 3ds Max (в основном, используется для разработки игр);
  • Cinema 4D.

«Если на сайте есть 3D-анимация, чуваки вообще офигенно крутые. Как по мне, она чаще встречается на сайтах дизайн-агентств и в продуктовом дизайне. Например, создается объемная модель велосипеда, чтобы показать его в движении. 3D-анимация распространена, но больше как графический элемент — объемная картинка/иллюстрация или просто объект в качестве бэкграунда. По крайней мере, именно это мне встречается», — дополняет Яна.

Если на сайте есть 3D-анимация, чуваки вообще офигенно крутые.

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

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

А уже полноценно создать gif анимацию для сайта можно при помощи:

  • Photoshop
  • Principle
  • After Effects
  • Cinema 4D (для 3D-анимации).

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

Поделись своей эмоцией после прочтения статьи

rating-5

Отлично!

rating-4

Хорошо!

rating-3

Любопытно..

rating-2

Не очень

rating-1

О чем это?

Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!

Подпишитесь на нашу рассылку, чтобы получать интересные материалы и инсайты из жизни компании Мы будем готовить для вас только самые актуальные и интересные материалы ��

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *