Анимация в шапке сайта — это анимационный блок, расположенный, в верхней части сайта.
Эта анимация располагается вверху и сразу привлекает внимание клиента.
Обычная шапка сайта как правило является изображением с главной информацией на взгляд владельца сайта. Но такой вид предоставления информации не привлекает, и шапка сайта в большинстве проектов бесполезна, поэтому от нее часто отказываются.
Но если вместо неработающей обычной шапки сайта разместить анимационный блок, в котором информация о вашем сайте, продукте или услуге подается необычно и эмоционально, то эффект будет совершенно другим.
На ПК, ноутбуках, планшетах и мобильных телефонах в горизонтальном расположении экрана, анимация может быть вписана в сайт (монитор слева), так и растянута по всей ширине (монитор справа).
На ПК, ноутбуках, планшетах и мобильных телефонах в горизонтальном расположении экрана, отображается стандартная горизонтальная (альбомная) анимация.
Но на экране смартфона в вертикальном расположении анимация становится маленькой и незаметной, так как она сжимается по ширине и сильно уменьшается.
Именно поэтому для мобильных устройств разрабатывается отдельная анимация вертикального (портретного) типа, которая включается автоматически, и которая хорошо видна.
Эта анимация была конвертирована из анимационного видеоролика, который был создан для обучающего подразделения нашей студии VectorStyle и состоял из 4 сцен.
Посмотреть видеоролик можно ниже:
В данной анимации нет изображений. Все объекты отрисованы в векторном виде с помощью линий и фигур. Поэтому вся анимация умещается только в 1 файл json.
В данном примере представлены 3 анимационных блока, которые были созданы из 3 сцен видеоролика. Их можно соединить в 1 анимационный блок, но для примера этого делать не стали.
В каждом блоке визуально показываются преимущества и выгоды обучения компьютерной графике в нашей студии.
Длительность:
Первого анимационного блока: 15 секунд
Второго анимационного блока: 25 секунд
Третьего анимационного блока: 1 минута 2 секунды
После первого воспроизведения, анимация зациклена на начало и начинает проигрываться заново, то есть является бесконечной.
Размер файла первой горизонтальной анимации json: 394 кб
Размер файла второй горизонтальной анимации json: 1,03 мб
Размер файла третьей горизонтальной анимации json: 241 кб
Вертикальной анимации в данном примере нет. В качестве вертикальной анимации используется увеличенная горизонтальная анимация, в которой показываются основные анимационные действия.
Все это говорит о том, что анимация быстро загружается вместе с загрузкой страницы сайта и сразу же начинает проигрываться и выполнять заложенные в нее задачи.
Кроме просмотра анимации клиент также может взаимодействовать с анимацией кликая по различным элементам — красиво появляющимся кнопкам, картинкам, областям, открывающим новые страницы и формы подачи заявки на ваш продукт или услугу.
Такой подход еще больше усиливает связь между вашим продуктом и клиентом, а путь к заказу становится эмоциональным, вдохновляющим, коротким и быстрым.
Телеграм:
https://t.me/gve2005
Все права защищены © Copyright 2021 — 2025. УНП HA5833271