PageBlur.js - библиотека для создания эффекта размытия элементов на сайте.
Используется библиотека html2canvas для получения изображения элемента, далее с помощью библиотеки stackblur или intagralimageblur это изображение размывается. Для увеличения скорости размытия(это достаточно долгий процесс) есть алгоритм оптимизации, его суть заключается в том, что полученное, для размытия, изображение уменьшается в несколько раз(коэффициент можно задать).
При подключении библиотеки можно задать следующие параметры:
tScreen - id элемента, который нужно размыть. Тип: string. Значение по умолчанию: 'screen'
wrapBlur - Класс элементв в котором создается размытый элемент. Тип: string. Значение по умолчанию: 'wrapBlur'
radius - Радиус размытия. Тип: number. Значение по умолчанию: '10'
opti - Оптимизация. Тип: boolean. Значение по умолчанию: false
kOpti - Коэффициент оптимизации. Тип: number. Значение по умолчанию: 100
algorithm - Выбор алгоритма размытия stack или integral. Тип: string. Значение по умолчанию: 'stack'
Алгоритмы
stack - размытие по гауссу, оптимально работает практически на всех браузерах, кроме старой оперы.
integral - скорость размытия почти не различается между браузерами, на старой опере работает более быстрее, чем stack
Оптимизация
Коэффициент оптимизации влияет на размер размываемого изображения.
Например radius = 100, kOpti = 20, тогда 100/20 = 5. Изображение будет уменьшено в пять раз.
Например radius = 10, kOpti = 100, тогда 10/100 = 0.1, округляется до 1. Изображение не будет уменьшено.
Например radius = 10, kOpti = 5, тогда 10/5 = 2. Изображение будет уменьшено в два раз.
Подключаем библиотеку
<script src="js/PageBlur.js"></script>Добавляем код перед закрытием тега <body>
<script>
window.onload = function(){PageBlur()};//Необходимо создать элемент с атрибутом id="screen" и еще один(или более) элементов с атрибутом class="wrapBlur"
</script>Мы рассмотрели простейший вызов без параметров, теперь с параметрами
<script>
window.onload = function(){PageBlur({
tScreen: 'block',
wrapBlur: 'head',
opti: true,
kOpti: 25,
radius: 50,
algorithm: 'stack'
})};
</script>Можно выполнить свой скрипт
<script>
window.onload = function(){PageBlur({
opti: true,
kOpti: 1,
radius: 2,
algorithm: 'stack'
},function(){
alert('Work!');
})};
</script>