jQuery

индекс
283,92

Анимированные спрайты на jQuery – Spritely

Spritely — является JQuery плагином для создания динамического изображения и фоновой анимации.



С возможностями JavaScript, анимацией можно управлять с помощью движения мыши или кликов.
Анимированные элементы могут летать на странице не затрагивая любой другой элемент страницы (может быть идеальным для баннеров) и страница по-прежнему остается доступной.
Работает там, где Flash не поддерживается, даже включена поддержка IE6.

P.S. В качестве примера на странице автора можно наблюдать стаю 4х глазых птиц — мутантов, которые охотятся за нажатиями клавишей мыши.
+47
12 марта 2010, 08:41
89

комментарии (47)

–2
webbolt #
забавная реализация. пожалуй может быть полезна в некоторых проектах.
+10
MARDEN #
Любопытная штука. Но 100% нагрузка проца — достаточно серьезный минус.
+1
gromka #
У меня всего 20% загрузка, что вполне приемлемо.
0
brainfucker #
Ну меня 47% (Хром)
0
smartov #
Зависит от проца. У меня не больше 15% на Core 2 Duo 3 GHz. Флеш проц тоже не слабо грузит
0
widowmaker #
на неразогнанном Core i5 750 — ~10% в FF3.6, и ~7% в Последнем Хроме (из дев ветки)
–1
deniamnet #
24% Хром
0
gloomkolomna #
Прелесть какая :) очень симпатично сделано
+1
Tixey #
Согласен с MARDEN. Сравнил нагрузку на проц которую создает приведенный пример, с нагрузкой при проигрывании flash ролика на этом сайте www.property-serviceazur.com/

Флэш грузит почти в 2 раза меньше, в то время как даже на flash все нынче наезжают за его тормознутость, особенно на маках.
0
FractalizeR #
Не думаю, что только из-за того, что в данном конкретном тесте flash в два раза быстрее Javascript+HTML его нужно объявить королем скорости.

Правда, что касается меня, на моих Windows компах с Flash все в порядке. Не жалуюсь на скорость.
НЛО прилетело и опубликовало эту надпись здесь
+1
FractalizeR #
Почему же нет? Как напишете, так и будет работать.
НЛО прилетело и опубликовало эту надпись здесь
0
GreyCat #
Вся эта штука — один большой страшный overkill — не думаю, что это когда-то будет сколько-нибудь серьёзно применяться. Современные браузеры давно уже умеют чудесный тэг canvas и/или умеют вставлять процедурные SVG-картинки — и, соответственно, имеют полный набор операций на них — между прочим, вполне себе hardware accelerated, без изменения DOM основной страницы и страшного ререндеринга всего на каждый чих.

Неудивительно, что производительность flash выше, а нагрузка на процессор — ниже. Удивительно то, что никто до сих пор не сравнил с хотя бы canvas…
+20
Mozzi #
Раньше нужны были гигагерцы что бы шпилить в 3d написанное на С++, сейчас нужны гигагерцы, что бы наблюдать за спрайтовой анимацией в браузере реализованной при помощи JS — мде, прогресс на лицо )))
+7
ssve #
Повышение производительности железа с лихвой компенсируется созданием еще одного уровня абстракции )
0
super_p #
Теперь появятся еще более надоедливые RichMedia
+2
sindrom #
Нет, все таки javascript не предназначен для long-time анимации.
В jQuery для этого используется таймер, вызываемый каждые 17 мс. Это получается почти 60 fps. Вот и подумайте: бедному браузеру нужно обновлять dom 60 раз в секунду. Конечно при таком раскладе загрузка cpu будет очень высокой.
0
DriverX #
ох и жрут же такие красоты.
0
gangster1919 #
может быть идеальным для баннеров

Сомневаюсь что это подойдет для баннеров, всетаки нагрузка действительно больше флеша.
Если плавющие флеш баннеры иногда раздражают, то чего ждать от баннеров с данной реализацией.
+4
Azmorf #
> Если плавющие флеш баннеры _иногда_ раздражают
А Вы терпеливый (:
0
gangster1919 #
Просто я понимаю что для многих владельцев сайтов реклама основной источник дохода, и в адблок вношу только некоторые адреса. Но думаю если появятся такие баннеры, то я все же их буду блокировать.
0
Aldekein #
Вы действительно думаете, что это сильно смутит горе-дизайнеров и мудо-вебмастеров?..

Я на это не надеюсь =(
+1
Limarc #
Есть подобный плагин на Mootools: www.aryweb.nl/voorbeelden/pngAnimation/
НЛО прилетело и опубликовало эту надпись здесь
+1
kost #
Теперь новогодние снежинки на сайте выйдут на новый уровень!
0
Pilat #
AdBlock отлично борется с снежными заносами, и с этими тоже поборется.
+1
3ds #
Многие люди, когда читают текст выделяют курсором строку, в месте чтения(например я). А когда птица прилетает и загораживает все не очень удобно :) ИМХО.
0
kost #
Это же просто демо.

+2
DnV #
Блин, круто, а мне религия, навязанная флешем, не позволяла за пределами картинки нажимать ))
+1
mikeSP #
недавно в попандере видел отличную реализацию на скрипте. несмотря на то что обычно я сразу закрываю подобные окна, заинтересовался. регистрация выполнена в виде предварительной игры.
не сочтите за рекламу, вот ссылка кому интересно fotostrana.ru/start/questpet/
0
Rodman #
Работа — «Грачи прилетели»… и гоняются)
+1
nakedskull #
Некоторое время назад реализовывал вращение мельницы c помощью спрайтов
из milk.okhcraft.com/indexswf.swf
получилось milk.okhcraft.com/index.php
И еще вот такую анимацию получилось сделать — milk.okhcraft.com/brands.php
0
gildor #
Ух, 1.7 мб на спрайт… Мощно. Во флеше конечно получилось бы намного легче.
Но зато крутится плавно и у меня процессор заметно не жрет.
А как, если не секрет, делали сами кадры спрайта?
0
nakedskull #
Рендер вращения мельницы разбил на 80 кадров, далее положил под каждый кадр одинаковую картинку, слепил все в кучу и сжал с помощью jpg.
Все операции с помощью ImageMagick
0
gildor #
А рендер в чем делали?
0
nakedskull #
Про рендер соврал. Повороты лопастей вытаскивал из swf. Они там в png и jpg были. И, кстати, jpg-и весили около 900 КБ вместо моих 1.7 мб. Причем в лучшем качестве, но с черным фоном.
0
Bright #
Анимированные баннеры элементы могут летать на странице...
+1
filippoff #
50% — Opera, интересно придумали)
по старой привычке ожидал прицела чтобы застрелить птичек
0
dmsx #
У гугла видел подобный эффект в виде аннимированных значков — www.google.cn/
0
Phil_ip #
Не во всех проектах можно использовать флеш по тем или иным причинам, тем более это пример и никто не просит нагружать 100500 слоев, чтобы делать банеры и я думаю в грамотной реализации — это будет меньше весить и быстрее чем флеш, особенно, когда рядом нет флешера :-D
0
Phil_ip #
Воот кстати плохой пример, неправильного использования флеша, www.bezumnieusilia.ru так вот я более чем уверен, что на JS вышло бы меньше по размеру и быстрее, у меня тут даже комп рычит, когда я запускаю этот сайт
–1
takobus #
На iPhone 3g совсем не тормозит, ура
0
art008 #
На IE 6.0. даже не тормозит у меня))
0
vick #
0
ItGold #
0
ozonar #
По поводу скорости посмотрите на другие проекты с тем же скриптом, ( redirectme.to/ например ) у меня нагрузка <5%

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.