Разработка анимированного HTML5 баннера для Google Adwords с использованием GSAP

Не так давно Google дал возможность рекламодателям размещать HTML-баннеры в своей сети Adwords. Не смотря на довольно-таки серьезные технические ограничения и требования, такие баннеры выглядят гораздо привлекательнее классических GIF-баннеров.

Здесь вы видите баннер, который я сделал для демонстрации (отключите AdBlock). Дизайн не мой, увидел этот баннер в сети и просто повторил его в своей реализации.

Основным ограничением HTML5-баннеров стал их вес: разработчик должен уместить все ресурсы в архив с максимальным размером 150Kb. Сюда кроме .htm документа могут быть включены изображения, стили и JS.

Однако, есть и хорошая новость: вы можете подключать к документу Google Fonts и JS-библиотеки, размещенные на серверах Google, и эти ресурсы не будут учитываться в размере архива. Можно подключить старый добрый jQuery, но наибольший интерес представляют библиотеки для анимаций: Greensock (GSAP) и CreateJS. Ссылки на библиотеки можно найти здесь.

Популярность HTML5-баннеров постепенно растет. Очень похожие баннеры можно делать для Яндекса, Mail.ru и ее сети Target, а также другие рекламные платформы. Читать далее

Comment the post