Создание HTML5 баннера

Anatomija-Bannera-2

See the Pen Создание HTML5 баннера by baha (@baha82) on CodePen.

Создание HTML5 баннера

Эффективная баннерная концепция, по сути, ближе к наружной рекламе, чем к печати или телевидению. Ограничение временными рамками баннерной рекламы (15 секунд), требует быстрый захват внимания захватывающим сообщением, и заложить надежный «CTA» или призыв к действию.

 

Раскадровка для уточнения Вашего сообщения

Как и все творческие проекты, cоздание HTML5 баннера начинается с раскадровки. Попробовать рассказать свою историю в 3 или 4 кадра. Начните с яркого визуального «Призыва», чтобы обратить глаза посетителя на баннер и заканчите «Полным» сообщением и призывом к действию.

Если вам трудно уместить все в вполне вероятно, Ваши сообщение слишком сложно.

[baslider name=» Создание HTML5 баннера»]

Код этого баннера состоит из простой разметки HTML5 и использования CSS, чтобы сделать все проектные решения. Вот несколько советов для кодирования, чтобы облегчить процесс разработки.

1)Начните с <figure> — это «родительский» элемент,  установите для него свои окончательные размеры, это обеспечит высокую точность при разработке макета всех «дочерних» элементов.

2)Используйте <button> для CTA (Призыв). Типичная <a href=»»> ссылка может показаться лучше, но баннеры полагаются на JavaScript для запуска по клику, во многом таким же образом работают кнопки «отправить».

Используйте <ol> <ul> <dl> для текстовых элементов, очень часто они идеально подходят для сообщений, которые строят богатый синтаксис для дополнительной гибкости стиля.

 

Анимирование с TweenMax

TweenMax это легкий и незамысловатый JavaScript API, который работает с хореографией для анимации HTML и анимационной графики. TweenMax простая формула или “рецепт” для описания движения в коде.

Команда, чтобы оживить HTML-элемент из одного места на экране в другое выглядит так…

TweenMax.to( );

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

3 блока информации… TweenMax.to( «A» , B , { C } );

  1. А. HTML-элемента (любой селектор в кавычки), который вы хотите переместить.
  2. Б. Продолжительность (число) в секундах.
  3. С. Через запятую перечень значений { between moustache braces, p:v, p:v } всех атрибутов CSS, которые вы хотите изменить и новые параметры, которые они должны применить, когда свои закончится.

Другими словами:

TweenMax.to («h1», 3, {x:500, alpha:0.5});

<H1> Будет скользить по элементу на странице горизонтально вправо и исчезать в 50% непрозрачности. Это базовый рецепт. Путем добавления дополнительных строк кода вы можете создавать сложные анимационные последовательности.

Aliexpress INTAliexpress INTAliexpress INT

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

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