Плагин для размытия любой области страницы в стиле iOS 7

#jquery #plugin #css #javascript

Однажды делая свой сайт мне захотелось сделать overlay'и так же как это сделала Apple
в своей iOS 7: вместо  какого либо background оставить его прозрачным, только лишь
размыть то, что находиться позади этого div'a и иногда слегка наложить полупрозрачный
цвет.  

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

Потом мне пришла великолепная идея выложить это на GitHub.
Я его собрал в качестве плагина для jQuery.
Страница на GitHub.
Страница плагина.
Очень рад буду принимать ваши pull reqest'ы, issue, отзывы, звезды и так далее)))
Не примите за рекламу, просто мне кажется что плагин действительно нужный в наше
время, судя по стольким не закрытым вопросам на форумах, в большинстве своем "stackoverflow",
а по другому никто о нем не узнает.

    

Ответы

Ответ 1

Блурить по координатам нужно крайне редко, обычно это делается для конкретного элемента,
так что css filters + polyfill самое оно;
Вы делаете расширение для jQuery, то добавьте return this в конец, сейчас после вызова
вашего метода, невозможно продолжить цеполчку вызовов jquery-методов;
Внутри функции $.fn.blurBg вы получаете html, стирает его, а потом, на onrendered,
заново вставляете. Это совсем плохо. Во первых, html2canvas работает асинхронно, поэтому
элемент, с которым работает ваше расширение может быть за это время уже модифицирован.
Во вторых, если в элементе находился тег script, то при использовании метода $.fn.html
он опять будет выполнен, что может привести к нежелательным результатам, вот пример;
Вместо метода position, нужно использовать offset;
Если вы пишите для jQuery, то лучше использовать его, а не скатываться в native код;
Заблуреный вариант, вставляется через background, что опять же может привести к нежелательным
последствиям, если у элемента уже есть style="background: ...";
Если ресайзить страницу, то совсем печально :]