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

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



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

    P.S. В качестве примера на странице автора можно наблюдать стаю 4х глазых птиц — мутантов, которые охотятся за нажатиями клавишей мыши.
    Поделиться публикацией

    Похожие публикации

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

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

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

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

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

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

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

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

                                                                        Самое читаемое