help - не могу размыть задний фон

[Zverushka]

Беда какая-то, уже 2 часа бьюсь головой об стену(((

Нужен задний фон для .modal окна, чтобы был размыт - использую скрипт blur.js http://blurjs.com/

Но НИЧЕГО не выходит! 

http://zverushka.zz.mu/river2/ (вспрывалющее окно по кнопке закажите лендинг).

Да даже ничего не выходит куда угодно, если скрипт воткнуть. Я уже перепробовала кучу скриптов - но они размывали все окно, а не только фон окна. 

Код 

  Quote

	$('.modal').blurjs({		draggable: true,		overlay: 'rgba(255,255,255,0.1)',		radius:10,		debug: true	});

Я даже старый jquery воткнула, как в их демо - чтобы работало, а оно не работает.

Edited November 18, 2013 by Zverushka

[ryter]

а вы пробывали указать от куда брать bg для блюра ?

[Zverushka]

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

Да и мне нужна не картинка, а текст тоже - чтобы все было размытым...

[npofopr]

не в тему... но у вас кнопки начинают дергаться, если медленно сверху вниз наводить.

[Zverushka]

  On 11/18/2013 at 4:17 PM, npofopr said:

не в тему... но у вас кнопки начинают дергаться, если медленно сверху вниз наводить.

Как считаете, прозрачная граница пойдет в качестве решения проблемы?

[spdif]

может попробовать CSS Filters

[ryter]

  On 11/18/2013 at 4:52 PM, spdif said:

может попробовать CSS Filters

не совсем кросбраузерно)

[npofopr]

  On 11/18/2013 at 4:47 PM, Zverushka said:

 

  On 11/18/2013 at 4:17 PM, npofopr said:

не в тему... но у вас кнопки начинают дергаться, если медленно сверху вниз наводить.

Как считаете, прозрачная граница пойдет в качестве решения проблемы?

 

ну лучше через тень

[Zverushka]

zverushka.zz.mu/river/

Я реализую блур через фильтры.

Проблема - если нажать на кнопку и всплывет окошко, то появляются тормоза при прокрутке (а возможно и не только при ней).

А также не могу сделать размытие для ослика.

С мозиллой вообще непонятно - локально у меня размытие - а на сервере серый фон.

Собственно тормоза-то и были в мозилле, но когда на сервере смотришь - то вообще непонятно из-за серого фона. 

 

Блин, я вместо работы трачу кучу часов на какую-то фигню, которая никак не хочет начать работать. Если серый фон в мозилле не убрать - то смысла в фильтре нет вообще, так как это никуда не годится. Это вообще возможно реализовать или нет?................

.blur > * {      /*-ms-filter: blur(2px);      -o-filter: blur(2px);      -moz-filter: blur(2px); */      -webkit-filter: blur(2px);      filter: url('../index.html#blur');      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');}.modal {    // none blur effect    // -ms-filter: none;    // -o-filter: none;    // -moz-filter: none;    -webkit-filter: none;    filter: none;   }

Активация добавлена через скрипт 

$(".popup").click(function(){				$(".modal1").modal({			center: true,						onShow: function() {				$("body").addClass("blur");			},			onHide: function() {				$("body").removeClass("blur");				}		});	});	

Привязка событий по клику реализована в скрипте modal.js через

	var modalHide = function() {		$modal.fadeOut(delayHide);		$modal.removeClass('active');                // Привязанная пользовательская функция при закрытии окна		if (onHide) {			onHide();		}	};                                 $modal.fadeIn(delayShow, function(){			$modal.addClass('active')                       // Привязанная пользовательская функция при открытии окна			if (onShow) {				onShow();			}		});		

Edited November 20, 2013 by Zverushka

[lexxcode]

Делать динамический блюр довольно затратная операция, вот и тормозит. Можно попробовать немного считерить при вызове окна сделать снимок страницы, заблюрить и поставить как фон оверлея, останется только при скролинге менять background-position в соответствии с прокруткой. Для снимка страницы можно попробовать кокрутить этот плагин http://html2canvas.hertzen.com/ . Блюрить canvas'ом и из него получать готовый фон. По идее это должно будет работать в IE9+ и остальных браузерах. Для старых IE можно будет оставить просто полупрозрачный черный фон. Как-то так я это вижу, как вариант. 

[Zverushka]

А как скриншот заблюрить кроссбраузерно?

[lexxcode]

Ну вот есть пример реализации разных фильтров на canvas, в том числе и блюра http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

[Zverushka]

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

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

Edited November 20, 2013 by Zverushka

[npofopr]

  On 11/20/2013 at 2:59 AM, Zverushka said:

который еще не реализован никем

ну это вы льстите себе. Буквально вчера встречал сайт, где это реализовано. 

 

А не подойдет заказчику обычная "грязная" размытая png'шка на фон? Вместо однородного цвета. 

[Zverushka]

  On 11/20/2013 at 6:24 AM, npofopr said:

ну это вы льстите себе. Буквально вчера встречал сайт, где это реализовано. 

А где же я льстю, если ничего не сделала?) 

И если реализован размытый фон, например, картинки - это еще не значит, что реализован именно блур всей страницы с текстом и картинками и данмическим содержимым).

А если и реализован - то покажите мне этот сайт! Я угоню у него скрипт ....

А что за размытая пнгшка?... Я слабо представляю - она может дать размытый эффект?

[swandev]

наткнулся случайно на этот плагин http://labs.voronianski.com/jquery.avgrund.js/

 

Может что-то найдете для себя)

[Zverushka]

  On 11/23/2013 at 12:20 PM, ALEEX SWN said:

е для себя)

 

Я так поняла, там нельзя отключить зум?)

[swandev]

  On 11/24/2013 at 1:35 PM, Zverushka said:

 

  On 11/23/2013 at 12:20 PM, ALEEX SWN said:

е для себя)

 

Я так поняла, там нельзя отключить зум?)

 

Я не пробовал) Думаю можно, это ведь JS ( ну с учетом того что с ним знакома)

[Zverushka]

Одно дело в настройках галку поставить, другое - в чужой код лезть - как в дремучей лес в темноте)...

Сегодня мимо проекта проходила https://st.fl.ru/projects/upload/201311/f_8205291bee76e5b4.jpg

Сижу и думаю - ну и как это кто-то реализует?) Когда даже на этом форуме не смогли решить проблему. Разве только в хроме будет блур и все?..

[npofopr]

  On 11/24/2013 at 2:49 PM, Zverushka said:

Одно дело в настройках галку поставить, другое - в чужой код лезть - как в дремучей лес в темноте)...

Сегодня мимо проекта проходила https://st.fl.ru/projects/upload/201311/f_8205291bee76e5b4.jpg

Сижу и думаю - ну и как это кто-то реализует?) Когда даже на этом форуме не смогли решить проблему. Разве только в хроме будет блур и все?..

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

Для только Вебкитов это тоже хорошо, но заказчику это надо объяснить. Graceful degradation же

[Zverushka]

  On 11/24/2013 at 3:32 PM, npofopr said:

 Graceful degradation

 

Не, изящная деградация. это когда свойство поддерживается почти всеми современными браузерами, а в старых нет.

Тут же вообще почти никто не поддерживает). Я бы назвала это просто - некроссбраузерное решение)....

[npofopr]

И кстати, пример выше нагуглился за один запрос http://css-tricks.com/receding-background-modal-boxes/

Почитайте камменты, видел упоминание IE

  On 11/24/2013 at 3:34 PM, Zverushka said:

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

Чего вдруг? Видимо у каждого в голове свое понимание этого. Не вижу ничего страшного, чтобы в ФФ не было блюра, такого как в Хроме. Это куда лучше, чем городить не понятные скрипты для этого, чтобы ФФ напрочь весился. 

[Zverushka]

По моему изящная деградация оперирует вертикальными связями, то есть деградация по некому временному промежутку.
Да и сам термин деградации - означает изменение во времени.

Тут же идут горизонтальные связи - все браузеры имеют последние версии.

Эх, протестировала авгранд - работает только в вебкит, жаль...

http://blurjs.com не может заблурить всю страницу - только фон. Но в то же время, когда наводишь на простой текст ссылки - он блурится.

Как он это делает? Не могу найти код, каким скриптом делается блур текста.

[Николя223]

a:hover {

1. color: transparent;


2. text-shadow: 0 0 5px #000;

}

+ анимация

[npofopr]

http://codepen.io/andyhullinger/pen/ipGht вот) прикольное размытие)