homm Feb 15 2011 at 01:40

Анимированные баннеры на Javascript — это просто*

7 min

20K

jQuery*

+153

Comments 65

fireton Feb 15 2011 at 02:43

Очень круто. Спасибо.

beavis_1 Feb 15 2011 at 02:45

Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.

Смело и похвально. Но одновременно очень долго и трудно, если вообще осуществимо… Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности. Разве что малость потеснить :)

Очень хочется обобщить, сказав: «Ветряные мельницы опасносте!»

homm Feb 15 2011 at 02:50

Красным курсивом традиционно выделяется ирония ;)

beavis_1 Feb 15 2011 at 02:56

Я догадывался))) Но идея тем не менее, все равно интересная

dmitrek Feb 15 2011 at 03:16

Милая реализация.
Надо будет написать и о наших велосипедах — например о ~~небольшом~~ баннере для Renault.

homm Feb 15 2011 at 03:27

Сразу бросилось в глаза, что если развернуть спрайт с колесами на 90˚, картинка теряет в весе 100Кб. Если еще немного постеризовать и оптимизировать, получится 75Кб. Исходная весила 270.

kittyhug.ru/renault/last6/img/wheels.png
habrastorage.org/storage/2162343d/4b49751e/4324044c/5554da17.png

dmitrek Feb 15 2011 at 03:31

ничего себе! я её и png-крашил и чего только не делал со всей этой конструкцией. век живи — век учись.

radist2s Feb 15 2011 at 04:38

У Чикуенка, да и в техногрете у Лебедева есть, пожалуй, лучшая статья по оптимизации пнг.

dmitrek Feb 15 2011 at 04:55

видимо я как-то недостаточно внимательно её прочитал, странно.

homm Feb 15 2011 at 04:32

Так, самое интересное — cars2.png.

Ищите визуальные отличия:
Исходное: kittyhug.ru/renault/last6/img/cars2.png (1,2 Мб)
Конечное: habreffect.ru/files/b2a/1c4c4267f/cars2_o.png (1,6 Мб)

Постеризовывал по кусочкам.

homm Feb 15 2011 at 04:34

Подписи не там поставил, конечно, исходное 1,6 Мб.

dmitrek Feb 15 2011 at 04:56

обновил last6 на горизонтальный колёсный спрайт и вычищенную машинку — феноменально. размер стал чуть-чуть отличаться от размера flash версии баннера.
спасибо

homm Feb 15 2011 at 05:01

Что-то с колесами не все так просто. Я всю картинку повернул, а нужно видимо переставить их горизонтально не поварачивая. Сейчас колеса вытянуты и это сильно видно когда первая машина стартует.

dmitrek Feb 15 2011 at 05:13

да и суппорты(а?) уехали, совсем забыл об этом

dmitrek Feb 15 2011 at 05:20

колёса долго переделывать в горизонтальный вид, так что их вернул. но в любом случае за подсказку спасибо.

simpel Feb 16 2011 at 17:37

Если анимировать только диск, поверх спрайта покрышка+суппорты, то можно очень крепко сэкономить.

simpel Feb 16 2011 at 17:47

На картинке 6 одинаковых колес, которые есть в спрайте с колесами ;)

homm Feb 16 2011 at 17:50

И то верно :)

vit1251 Feb 15 2011 at 17:30

> Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности.

Добавление CANVAS в HTML5 помоему уже сделало свое дело. Теперь можно частично отказываться от простых Flash компонентов (графиков и т.п.).

Опять же учить еще один ActionScript и делать связи между Js и Flash на мой взгляд лишние какие-то действия и не очевидные. Куда проще все делать на одном JavaScript.

Ну если конечно не нужны «широкие возможности», а кстати какие это возможности? (ну кроме того что во всех обозревателях Flash одинаково работает)

aleksandro Feb 16 2011 at 00:44

Иногда нужно RTMP, но пока что только Flash.

Kigorw Feb 15 2011 at 02:46

Прикольно :)
я вот тоже сделал библиотечку www.kigorw.com/articles/banny — концепция приблизительно такая же (дерево сцен), только у меня заточка под цсс-аннимации.

easyman Feb 15 2011 at 02:48

Забавный тест производительности браузеров :)

homm Feb 15 2011 at 03:01

На самом деле от ускоренного воспроизведения нагрузка не повышается. Это для нас объекты движутся быстрее, браузеру все едино. Какие-то объекты изменяют координаты, потом перерисовываются. Нагрузка создается только частотой кадров.

easyman Feb 15 2011 at 03:07

Я смотрел на показания task manager во время выполнения скрипта.
Наверное, в process xp или в чем-нибудь подобном можно более точную оценку производительности получить.

AlexanderSergeyev Feb 15 2011 at 03:00

Давайте уж поскорее вытесняйте гадский флеш из баннеростроения. Чтобы весь негатив о баннерах не отражался на мнение о технологии для браузерных приложений.

easyman Feb 15 2011 at 04:06

А в чем плюсы javascript баннера?
Думаю, негатив останется.

dmitrek Feb 15 2011 at 04:10

не работает на айфонах/айпадах, а также на большинстве мобильных устройств

beavis_1 Feb 15 2011 at 04:39

Ну айфонов/айпадов сейчас не так уж и много, чтобы на них такую серьезную поправку делать. А что касается остальных мобильных устройств — я с трудом представляю, как они будут справляться с чем-то похожим на баннер, который ты показывал выше. Еще и про трафик не надо забывать.

На мой взгляд, в этом нет ни острой необходимости, ни толковой возможности :) По крайней мере, пока…

UFO just landed and posted this here

homm Feb 15 2011 at 10:54

Вижу 10-15 кадров у анимации из примера. Кроме того, давно известно, что если что-то делать чисто под iOS, нужно использовать webkit-анимацию и transitions.

UFO just landed and posted this here

rapida Feb 15 2011 at 03:04

что на счет загрузки ЦП / ОЗУ этих примером во сравнению с флеш аналогами?
не хотите привести сводную таблицу?

dmitrek Feb 15 2011 at 03:23

а смысл? в самом чистом сравнении у вас есть js баннер, который работает везде и flash баннер, который работает не везде. понятно что сегодня flash будет и плавнее и экономнее по ресурсам, но js оптимизация ещё подтянется. плюс, родное взаимодействие со всеми другими скриптами на странице.

zw0rk Mar 14 2011 at 03:12

у меня в lynx не работает тот, который работает везде :(

Die_Gelassenheit Feb 15 2011 at 03:54

Анимированные баннеры — это ужасно.
Но подход интересный.

homm Feb 15 2011 at 04:25

Если это промо-баннер, а не рекламный, и у него есть кнопка «старт», то нет ничего ужасного.

dmitrek Feb 15 2011 at 05:21

цели разные нужны, цели разные важны
это может быть не баннер, а просто анимация по какому-то поводу

humbug Feb 15 2011 at 04:01

мужик!

easyman Feb 15 2011 at 04:26

Оказывается, на этом уже бизнес делают. javascriptads.com/

dmitrek Feb 15 2011 at 05:23

сомнительный бизнес
там кажется о другом

dasty Feb 15 2011 at 04:50

Как-то Firefox не правильно работает, если еuj не перезагружать раз в день, то JS подвисает раз в пять секунд на пол секунды.

SwampRunner Feb 15 2011 at 05:52

Молодец, здорово смотрится.

mrorbita Feb 15 2011 at 07:15

www.sencha.com/products/animator/demos/
и если мне не изменяет память
То где-то была такая штука для raphaelJs animations написанная на томже extJS

homm Feb 15 2011 at 10:59

Ну вы же понимаете, что animator — это совсем про другое.

mrorbita Feb 15 2011 at 12:54

>Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба

Это я к тому, что эта штука уже реализована и доступна в исходных кода. Нужно только поискать

Сходу не нашел, но если попросите, то сяду и поищу часок другой

NeX Feb 15 2011 at 13:26

Аниматор сенчи — работает только под WebKit

stroncium Apr 5 2011 at 17:00

Можно делать анимации в адобовских тулзах и экспортировать джаваскрипт, они же нафигачили какой-то там открытый формат для экспорта(не помню, как называется, ибо не пользуюсь).

PycBouH Feb 15 2011 at 08:11

Хорошо, но по сравнению с чистым animate чуууть-чуть подлагивает ракета, когда по оси Y движется :)

Kyborg2011 Feb 15 2011 at 08:30

Замечательная статья. Спасибо.

klubben Feb 15 2011 at 08:32

А все равно, за анимированне баннеры надо руки отрывать

UFO just landed and posted this here

Vitality Feb 15 2011 at 10:56

FlashManiac Feb 15 2011 at 11:32

>> Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.

Поздняк метаться — на Adobe MAX была представлена новая фича CS5.

kuzenru Feb 15 2011 at 11:48

Хоть и на флеше тоже самое делается в 100 раз быстрее и в векторе, респект за подробное руководство, буду использовать, только не в баннерах.

dmitrek Feb 15 2011 at 12:31

Кто-то по всем вашим комментарием прошёлся с минусатором. За что?

homm Feb 15 2011 at 13:22

Не знаю. Главное, чтобы тому, кто это делает уже вторую неделю подряд, это приносило удовлетворение. Как у Будды.

UFO just landed and posted this here

WayBe Feb 15 2011 at 13:13

homm, если Вы сделаете это: «визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.», то это будет просто потрясающее решние.
Видел топик на хабре на такую-же тему — всё замечательно, а редактора нет. а вручную всё описывать слишком уж сложно.

FlashManiac Feb 15 2011 at 17:40

все дело в том что особо крутого ничего не будет, будут те же тормозящие и навязчивые баннеры… смысл?

andrewsh Feb 15 2011 at 18:05

Извините, но версия на Scenario у меня тормозит, в отличие от версии на jQuery. А именно, во время «прищуривания» не происходит обновления картинки. Почему — догадываюсь, но наверняка не уверен, проверьте, не закопана ли какая бяка где.

homm Feb 15 2011 at 18:18

Может вы поделитесь своими соображениями, раз они у вас уже есть?
Какая у вас ОС и браузер?

andrewsh Feb 15 2011 at 18:24

Соображения такие, что оно что-то очень активно лопатит, не делая setTimeout/return, или же делая, но на очень короткий промежуток времени. Браузер Iceweasel 3.6.12 на Debian.

Кстати, жкверевский вариант тоже иногда подтормаживает, но в самом конце ролика, когда обе ракеты уже почти улетели. Вариант на Scenario тормозит всегда, как только левый товарищ начинает прищуриваться.

homm Feb 15 2011 at 18:33

Нет, оно ничего не лопает, разрешение таймера по-умолчанию 33мс. Вы можете сами поиграться с ним во втором примере.

Мне кажется, проблема все же на вашей стороне. Например, Фаерфокс от долго работы решает именно в этот момент запустить сборку мусора. Посмотрите на загрузку процессора, нет ли там пика в момент, когда тормозит.

glazs Feb 15 2011 at 23:27

Не надо вытеснять флеш! Оставьте фанатизм! Флеш блокируется как нефиг делать, и нет баннеров!

art008 Mar 20 2011 at 22:41

В IE6 только с PNG проблемы, а, если fixPNG, применить, мне кажется, будут тормоза.

Хоть это и гадость, но она жива на 10% рынка (((