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