Webmasters.BY

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

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

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

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

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

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

Онлайн-демо

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

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

Исходные файлы примера.

Перевод