Blur JS

[@ishaba]

Это вот прям то чего не хватало, чтобы делать анимацию на js еще более эффектной!

[@ertaquo]

Псевдо-прозрачность — не полная прозрачность. В демках найдите Draggable, кликните «Demo» и перетащите этот блок поверх другого — сразу поймете, о чем я.

[@Alexufo]

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

[@Fesor]

Вообще-то алгоритм блура довольно простой и довольно легко обсчитывается. Не вижу такой большой проблемы.

[@Alexufo]

алгоритм блюра да, но ведь это в случае с готовой картинкой, а как же с блюром верстки? Там же может лежать куча дивов и css стилей… под блоком который их блурит?

[@Serator]

Фильтры SVG в CSS еще никто не отменял. Вот пример для Firefox — www.pmura.com/media/static/svg-blur/ (тоже самое можно и в Chrome, и т.п., лень искать кроссбраузерный пример). Ну и, дабы Chrome не обижать, в нем скоро появится нечто еще более простое — html5-demos.appspot.com/static/css/filters/index.html. Красиво :).

[@deniamnet]

Да, фон не такой, как под плашкой.

[@nicothin]

афганский пастух Саит негодует! ))

область применения описанного эффекта очень ограничена.
и, хочу надеяться, скоро видяхи с 2 гигами на борту станут обычным делом (хотя надежд все меньше и меньше).

[@nicothin]

разработчики уже не те, да…

[@VolCh]

А что в этом плохого с другой стороны? Сервер занимается предоставлением данных, клиент — их визуализацией и организацией UI. Причём клиент (в соответствии с желаниями пользователя и возможностями его железа/софта) сам просит у сервера в каком виде ему данные предоставить.

Собственно к этому веб и идёт частично. Различные API на сайтах для этого и предназначены. Правда и сами сайты не спешат отдавать полный доступ к своим данным. Да жаль, что с кросссайтовыми запросами всё не так хорошо как хотелось бы, с одной стороны, но и приемлемого по безопасности и удобству решения нет, с другой.

[@matiouchkine]

С одной стороны вы, конечно, правы.

С другой стороны jQuery весит 32К, а не 100; 32К для современного сайта — это несерьезно, даже если забыть про CDN.

Что касается известных крупных проектов — синдром NIH — бо́льшее зло, чем может показаться, поскольку вкупе отнимает огромное количество ресурсов. Когда мне нужно повесить полочку в квартире, я не начинаю процесс с обстругивания досок, вытачивания отвертки и выплавки шурупов.

[@matiouchkine]

где вы нашли jQuery такого маленького размера

Рекомендую гзиповать отдаваемый текстовый контент.

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

К сожалению, я солидарен с вами в этом пункте. Но золото — оно, как обычно, посередине.
Вы говорите про большие проекты, или про маленькие? Если про маленькие — то мне проще прицепить jQuery и не париться. Если про большие — то ваша аналогия с карандашом — натянута.

какая разница между созданием костылей для IE и костылей для jQuery

Огромная. В jQuery починили и закоммитили (или дождались патча, если проект нужно сдавать в 2020 году). А свои костыли будут отваливаться с каждой новой версией IE (утрирую, конечно, но все же).

[@Zibx]

Есть много операций, которые быстрее без jQuery. Даже если jQuery — простая обёртка над document.getElementById, то на каждый вызов этой обёртки будет уходить лишний вызов функции, проброс параметров, вход в скоуп, выход из скоупа. createElement нативный заметно быстрее создания блока на jQuery. А вот в местах типа click, keydown — обычно нормально использовать, потому что пользователь медленнее компьютера, а mousemove лучше нативный. Но надо отдать должное, без него, я бы не начал изучать считать в своё время, что на яваскрипте можно хоть что-то делать. А потом я прочитал сорцы, которые казались тогда какой-то магией.

[@matiouchkine]

Конечно, быстрее. Кто ж спорит?

Пример с createElement явно надуман: начало процесса создания элемента для пользователя неизвестно, чаще всего — это какая-нибудь реакция на действия пользователя, обмен с сервером, короче bottleneck тут явно не вызов jQuery.

getElementById — безусловно никто не предлагает отменить. Он не аннигилирует по факту подключения jQuery. Но смена атрибута у всех элементов с классом foo — это уже не для собственного кода. Ну, на мой взгляд.

[@Zibx]

Нормальные библиотеки всегда делают кучи проверок, потому что всеядны и проверки от дурака. Когда мы это делаем руками — мы знаем что проверять нужно, а что будет только жрать время лишними условиями. Обычно в сайтах это не критично, а вот в веб приложениях часто нужна сильная оптимизация.

[@VolCh]

Да, многое возможно реализовать небольшим количеством JS-кода без JQuery или аналогов. Пока дело не доходит до кроссбраузерности. Профессиональных клиент-сайд разработчиков, которые помнят все особенности всех браузеров начиная с MOSAIC Netscape Navigator 2 :) и, как следствие, могут писать кроссбраузерный код, не так уж много. А JQuery даёт какую-никакую гарантию кроссбраузерности, да и вообще предоставляет более удобный интерфейс, чем «нативный», для манипуляций с DOM.

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

[@Athari]

Моя Опера 11 неприлично тормозит, сколь-нибудь сносная скорость только на самом тормозном IntegralImageBlur. У кого-нибудь есть 12 бета? Как там?

Во всех браузерах попробовал — везде в разы быстрее. Ну как же так… Я ж в Оперу верить перестану.

[@GD666]

Opera 12.00 alpha build 132812 — тормозит

[@sshz]

Кто нибудь пробовал заблурить бэкграунд под всплывающим окном, как на android?
Что-то типа www.htc2android.ru/images/stories/sms-popup-android-1.png, получится такое сделать?

[@Serator]

Сделал небольшую демку, основываясь на своем комментарии чуть выше: jsfiddle.net/JVRGj/. Как видите текст может быть размытым, а может и не быть. Замените текст чем угодно и эффект сохранится ;).

[@sompylasar]

Для размытия текста (как в примере на картинке из статьи) можно использовать приём, который я заметил на www.google.com/mapmaker

#page * {
    color: transparent !important;
    text-shadow: 0 0 8px grey !important;
    text-decoration: none;
}

Текст сам делается прозрачным, и ему добавляется тень под цвет текста.