Анимация в шапке сайта — это анимационный блок, расположенный, в верхней части сайта.
Эта анимация располагается вверху и сразу привлекает внимание клиента.
Обычная шапка сайта как правило является изображением с главной информацией на взгляд владельца сайта. Но такой вид предоставления информации не привлекает, и шапка сайта в большинстве проектов бесполезна, поэтому от нее часто отказываются.
Но если вместо неработающей обычной шапки сайта разместить анимационный блок, в котором информация о вашем сайте, продукте или услуге подается необычно и эмоционально, то эффект будет совершенно другим.
На ПК, ноутбуках, планшетах и мобильных телефонах в горизонтальном расположении экрана, анимация может быть вписана в сайт (монитор слева), так и растянута по всей ширине (монитор справа).
На ПК, ноутбуках, планшетах и мобильных телефонах в горизонтальном расположении экрана, отображается стандартная горизонтальная (альбомная) анимация.
Но на экране смартфона в вертикальном расположении анимация становится маленькой и незаметной, так как она сжимается по ширине и сильно уменьшается.
Именно поэтому для мобильных устройств разрабатывается отдельная анимация вертикального (портретного) типа, которая включается автоматически, и которая хорошо видна.
В данной анимации на импровизированном деревянном столе, который выступает в качестве фона, двигаются блюда, ложки, вилки и ножи словно приглашая пользователя сделать нужное целевое действие.
Рядом с каждым блюдом пишется название этого блюда, краткий состав, вес, цена, а также кнопка «Съешь меня», после нажатия на которую, клиенту откроется страница или более подробного описания или оформления заказа данного блюда с доставкой на дом.
В этой анимации участвуют 4 блюда, которые показываются последовательно друг за другом. Можно разместить и большее количество блюд. Можно показывать сразу группы блюд. Можно добавить показ к каждому блюду, например чашку чая, можно добавить баночки с приправами и показать последовательность их применения.
При дополнительной разработке можно соединить данную анимацию с вашим сайтом ресторана или другого общепит заведения так, чтобы в анимации показывались акционные блюда, которые вы сможете выставлять в анимации простым их выбором в вашем личном кабинете сайта / интернет-магазина.
Также, если на вашем сайте каждый пользователь имеет свой личный кабинет, в котором может заказывать еду, то в анимации могут показываться рекомендации блюд для заказа, таким образом стимулируя пользователя на все новые и новые заказы.
Экран 1 — Демонстрация блюда «Рыба с овощами»
Экран 2 — Демонстрация блюда «Пицца с колбасой»
Экран 3 — Демонстрация блюда «Морской гребешок»
Экран 4 — Демонстрация блюда «Мясо по-польски»
Длительность:
1. Горизонтальной анимации: 28 секунд
2. Вертикальной анимации: 28 секунд
После первого воспроизведения, анимация зациклена на начало и начинает проигрываться заново, то есть является бесконечной.
Вертикальная анимация для мобильных устройств на первый взгляд похожа на основную горизонтальную анимацию, но ее производство занимает 70% от времени разработки основной горизонтальной анимации. Так происходит, потому что для вертикального формата нужно, во-первых, выстраивать все движения элементов заново. А, во-вторых, некоторые движения, эффектно, корректно и красиво преподносящие информацию в горизонтальном формате, не могут также справиться с этой задачей в вертикальном формате. И поэтому их нужно переделывать и адаптировать под вертикальный формат.
Размеры горизонтальной анимации:
1. Файла анимации json: 166 кб
2. Изображений, участвующих в анимации: 1,14 мб (Изображения деревянного фона (стола), блюд, вилки, ложки, ножа)
Размеры вертикальной анимации:
1. Файла анимации json: 167 кб
2. Изображений, участвующих в анимации: 375 кб
Все это говорит о том, что анимация быстро загружается вместе с загрузкой страницы сайта и сразу же начинает проигрываться и выполнять заложенные в нее задачи.
Кроме просмотра анимации клиент также может взаимодействовать с анимацией кликая по различным элементам — красиво появляющимся кнопкам, картинкам, областям, открывающим новые страницы и формы подачи заявки на ваш продукт или услугу.
Такой подход еще больше усиливает связь между вашим продуктом и клиентом, а путь к заказу становится эмоциональным, вдохновляющим, коротким и быстрым.
Телеграм:
https://t.me/gve2005
Все права защищены © Copyright 2021 — 2025. УНП HA5833271