Создаем полноэкранный Blur эффект изображения при помощи HTML5

Мы будем использовать Stack Blur, который представляет собой быстрое, почти Гауссово, размытие от Mario Klingemann от Quasimondo.

Изображения, используемые в демо, от Geoff Peters. Они распространяются на условиях лицензии Attribution 2.0 Generic (CC BY 2.0) License.

Как это работает

Основная идея заключается в добавлении нескольких изображений в нашу структуру, которая будет служить нам в качестве фонового изображения. Мы добавим canvas элемент, который будет содержать размытую версию изображения. Когда мы переходим к следующему изображению, мы добавляем размытый canvas за текущее изображение. Размытое canvas изображение теперь видно, и мы можем, или показать новое изображение немедленно (неразмытым) или показать его размытым, а затем "очертить" его.

Вы можете установить variation изменяя его между 1 и 2:

animOptions = { speed: 700, variation: 1, blurFactor: 10 }

Для анимации между каждым переходом (от нормального к размытому) и для blurFactor основного радиуса для эффекта размытия используется Stack Blur.

• Онлайн-демо
• Demo-1: Здесь мы используем variation 2, показано ближайшее изображение без размытия сначала.
• Demo-2: В этом демо мы используем variation 1, для размытия обоих, и текущего изображения, и ближайшего.