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