Windows Aero эффект на чистом HTML+CSS+JS

    Вдогонку к посту «jQuery → Впечатляющие анимационные эффекты» решил показать свою поделку, созданную скорее для развлечения, а не для реального внедрения. Я попытался сделать эффект размытия заднего фона как в Windows Aero.



    Вот пример, вместе с картинками весит 200 Кб. Довольно много.

    Следующий шаг — использовать одну картинку для заднего фона, а размывать с помощью SVG. Пример с SVG почему-то работает только в Опере (как написано в комментариях, в других браузерах тоже работает) и грузит процессор на 100%.

    Вывод: с помощью существующих технологий этот эффект реализовать можно, но либо картинки будут много весить, либо процессор будет загружен на все сто. До реального внедрения ещё далеко, но может быть кто-то знает более изящное решение?
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 22

      0
      А других вариантов нет, только SVG (очень сыро и медленно) или две картинки (быстро, но не универсально).
        +17
        Имхо, использовать canvas для этих целей куда логичнее.
        Кроме того, в текущем варианте при активном движении серьезно отстает перемещение фона, ибо помещать перемещение фона в анонимную функцию, подвешенную на кастомное событие плагина jquery — не самое производительное решение)
        Сравните:
        vps.dlussky.ru/aero.html
          +2
          P.S. И, кстати, в aero еще и рисунок бликов смещается при перемещении окна)
            +1
            Хороший пример для аргументов в споре jQuery vs JS :)
              +3
              Ну тут все спорно, jquery очень удобный инструмент, который ежедневно облегчает мне жизнь, но надо понимать, что у него есть несколько узких мест по производительности, и всегда нужно быть готовым взять в руки native)
              –1
              Отличный пример, спасибо. Я пробовал в своем варианте обойтись без jQuery, но особой разницы в производительности не увидел.
                +1
                А если убрать смещение backgroud из JS, а для #blur прописать background-attachment:fixed; работать оно будет еще быстрее.
                  0
                  Сначала я изобразил глубочайший фэйспалм и проклял свою узколобость и зацикленность на исходном решении, но потом понял, что мозг сознательно исключил background-attachment из множества решений, ибо данное свойство не работает в шестом IE)

                  Но вообще, решение очень крутое)
                    +1
                    Ну и собственно ваш пример:
                    vps.dlussky.ru/aero_ETCDema.html
                  +1
                  В FF 4 тоже работает пример с SVG.
                    0
                    В FF 3.6.8 под Mac тоже полет нормальный…
                    0
                    В Гугл Хром 6 тоже всё отлично и без нагрузки процессора работает…
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        В Chromium 6.0.472.59 пример с SVG прекрасно работает, грузит процессор на 1-2%.
                          0
                          В Opera 10.61 под Linux процессор не грузится, но опера зависает и падает в конечном итоге.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              В Chrome 7.0.517.8 dev с SVG грузит, но через какое-то время выедает весь процессор.
                              А в первом примере все нормально, но как-то странно фон под окошком немного двигается (хотя должен быть совершенно статичным, как в примере Dlussky)
                                0
                                Единственное что, окно должно немного увиличивать задний фон, чтобы был true win aero, но такое сделать вроде бы пока нельзя.
                                  0
                                  Что значит «на чистом HTML+CSS+JS»? Ладно бы на чистом HTML — я бы удивился.
                                    0
                                    safari 5.0.2 mac — чяднт? оба примера работают и проца не сильно кушают — вопрос в браузере видимо?
                                    в Chromium (не самом свежем — недельной давности) — тоже работают оба, но там загрузка действительно стремится к 100
                                      0
                                      аппаратное ускорение SVG?)
                                      0
                                      это не аэроэффект. по крайней мере с картинкой (svg не за работал). подобие да, но не аэро.

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

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