Как стать автором
Поиск
Написать публикацию
Обновить

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

IE7 показывает пустую страницу. Ругается на JS ошибку.
Спасибо, действительно. Мой косяк. Только пока что не смог победить IE6, думаю над этим.
И даже не думайте, бросьте идею поддержки IE6!
Ок.
Это JS ругается на браузер
За что человека минусуете? Ошибка действительно была.
IE6 сейчас используют только веб-разработчики, чтобы делать свои сайты совместимыми с IE6 :)
О том, что ИЕ6'нутый используют только веб-разработчики заблуждаются только сами веб-разработчики, пытаясь мечту притворить в реальность -)))
Я не призываю вдруг заново поддерживать ИЕ6'нутый браузер, а лишь прошу не иметь иллюзий, что его нету (.
Мы на него забили, но не совсем. Предупреждение висит всегда, но раз в полгода смотрим как выглядит что-то новое, и если можно поправить — поправляем.
В таблице статистика за месяц. Вторая колонка — визиты. И даже такая цифра — удручает :(
распределение по ИЕ на сайте XX
ИЕ6'нутый
Звучит!
Opera 11.50 — пустое окно, изображения появляются ток при наведении курсора :(
Хм… Забыл о багах Оперы и тестил только на первых этапах. Сейчас всё норм, проблема была в позиционировании.
Я скромно предполагаю, что если бы скрипт производил бы обратную процедуру то цены бы ему не было :).
Объясните, зачем вам пикча на web-странице, при наведении курсора на которую, она мутнеет?
Например размывать бекграунд когда вылазит всплывающее окошко авторизации, или окошко с картинкой.
Чтобы «развидеть это».
Ничто не мешает это сделать.
В примере, из ссылок в конце статьи, нет девушки из первой картинки (:
В IE9 не так эффектно смотрится, как в Chrome например.
На странице с мутными картинками меня подташнивает.
Меня тоже. А вот уменьшение насыщенности картинок не в фокусе мне понравилось.
Несмотря на то, что автор сделал именно размытие по Гауссу, на основе данного примера можно сделать и другие эффекты.
Кстати, да. А я почти сразу чувствую резь то ли в глазах, то ли в мозгу.

Приём интересный, возьму на заметку, но пример не кажется приемлемым для Web-дизайна в текущем виде. Может, размытие чересчур сильное.
Зашел на страницу, думал с глазами что-то. Навел мышку — отлегло.
По мне так девушка что в начале топика наиболее красива в «полуразмытом» состоянии, а именно на второй картинке)
Ок, сделайте прозрачность «исходного» слоя равной 0.5
Там уже не размытие получается, а эффект Bloom. Надо только интенсивность размытия сделать поменьше и уменьшить прозрачность исходного слоя.
сафари — не работает эффект.
опера — при наведении появлется картинка, а так белая страница.
корректно только в файрфоксе.
В Chromium (12.0.742.91 (87961) Ubuntu 10.10) всё красиво, в Firefox 5.0 — тоже.
Очень рекомендую
$('.blurImageContainer:not(:animated)').hover(function(){…

добавить, выделенное жирным.

Еще вариант:
$('.blurImageContainer').hover(function(){
$('.blurImage', this).stop(true, true).animate({opacity: 1}, 500);
По-моему, сегодня вешать что-то серьезное и визуально заметное на load просто нельзя.

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

В том же жквери, например, можно повесить код на событие load отдельной картинки, что как раз то что надо в этой ситации.
До конца дочитали? Написано ж «It doesn't work consistently nor reliably cross-browser»
Ну да, есть такое дело. Я, естественно, имел ввиду код с фоллбеком на $(window).load в случае несрабатывания $(image).load. Просто не стал акцентировать внимание на деталях. :)
Спасибо! А скажите, возможно ли подобный подход применить для эффекта типа Aero Glass, то есть перед размытым слоем есть полупрозрачный слой, при этом возможно движение обоих слоёв, а за границами переднего слоя размытия фонового слоя быть уже не должно? Сейчас такое реализовал через синхронизацию двух изображений, одно из которых уже размытое, но хотелось бы более красивого способа…
А можно сделать, чтобы купальник размывался, а что под ним — нет?
Я думаю, этот пост открыли многие лишь из-за картинки (:
Судя из комментариев это нормально работает только в Firefox'е. Если так, то в нем можно применять эффекты svg к html — developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content. Быть может тогда это все можно сделать без всякого js, простым css / html / svg (smil)?
Не только в нем. На текущий момент проблемы только две: IE6 и Safari. В остальных вы можете сами проверить. A SMIL работает не везде (например, Microsoft полностью отказалась от него в пользу CSS анимаций)

Ну css animation тоже есть в Firefox'е. Но вот эффекты svg в html уж точно не везде применимы, зато можно было бы без скриптов обойтись :).
Неплохо, но уж больно процессор напрягает. Не лучше ли будет рассчитать размытие заранее (скажем 5 ступеней)? и анимировать без прозрачности?

P.S. Может это из-за того, что у меня Фокс старый…
ЭЭх, девочку на фотографии не размывать, а зумить и шарпить надо
Лучше делать расфокусированность (unfocus, lens blur и т.п.). Не тошнит, как от гаусса.
спасибо за статью. на практике более полезно было бы применять не размытие, а десатурацию (не знаю как правильнее сказать — приведение к чернобелому, точнее, градациям серого).
п.с. кстати, когда внедрял эту самую десатурацию, пришлось отказаться от svg (не помню почему, видимо, глючило) в пользу канваса.
Ну такую-то картинку и поблюрить не грех!
Млин, я и не сомневался, что среди всей технологической дребедени, уж 3000-й то коммент обязательно будет в таком вот духе :)
Причина плохого зрения!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации