blur.js

Что такое?

blur.js i- плагин jQuery, который формирует полупрозрачные
размывающие элементы поверх остального содержания страницы.

Пример кода

$('.target').blurjs({ source: 'body', radius: 7, overlay: 'rgba(255,255,255,0.4)' });

Примеры

Зачем?

А почему бы и нет?

Значения по умолчанию

$('.target').blurjs({ source: 'body', //Размываемый фон radius: 5, //Радиус размытия overlay: '', //Цвет слоя перекрытия, используется синтаксис rgba() CSS3 offset: { //Смещение для положения фона x: 0, y: 0 }, optClass: '', //Класс, который добавляется ко всем изменяемым элементам cache: false, //Если установлено значение true размытое изображение будет храниться в кеше cacheKeyPrefix: 'blurjs-', //Префикс для объекта локального хранилища draggable: false //Используется только если имеется jQuery UI. положение фона будет фиксированным });

Демонстрация

Радиус размытия

$('.target').blurjs({ source: 'body', radius: 10 });

Слой перекрытия

$('.target').blurjs({ source: 'body', overlay: 'rgba(255,255,255,0.4)' });

Слой перекрытия 2

$('.target').blurjs({ source: 'body', overlay: 'rgba(0,100,100,0.1)' });

Смещение (source bg attachment must be scroll)

$('.target').blurjs({ source: 'body', offset: { x: 15, y: -12 }, });

Кеширование (смотрите в консоли)

$('.target').blurjs({ source: 'body', cache: true, debug: true });

Изменяем фон

$('.target').blurjs({ source: '#wideContainer', overlay: 'rgba(255,255,255,0.3)' });