Страницы

Поиск по вопросам

четверг, 29 ноября 2018 г.

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

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


Ответ

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

Комментариев нет:

Отправить комментарий