Мы будем использовать быстрый Stack Blur, почти Gaussian blur для Canvas от Марио Клингеманна (Mario Klingemann) из команды Quasimondo.
Изображения, использованные в демо, были позаимствованы у Джофа Питерса (Geoff Peters), и распространяются они по лицензионному соглашению Attribution 2.0 Generic (CC BY 2.0).
Как здесь всё устроено
Идея заключается в том, чтобы добавить в структуру документа некоторые изображения, которые бы служили в качестве фона. Мы также добавим элемент canvas, который будет содержать в себе размытую версию изображения. Когда мы будем переходить от элемента к элементу, размытый canvas будет расположен под текущим изображением, и будет затемнять его. Так как теперь перед нами предстает размытое изображение, мы можем отобразить новое четкое изображение, либо создать переход его от размытия к четкости.
Это можно установить посредством изменения параметра variation от 1 до 2:
animOptions = { speed : 700, variation : 1, blurFactor : 10 }
Параметр speed определяет скорость перехода между изображения из одного состояния в другое (от нормального к размытому), а blurFactor определяет радиус эффекта размытия, использованного в Stack Blur.
Демо
Демо 1: Здесь мы используем variation 2, отображая последующее изображение без размытия.
Демо 2: В данном демо мы используем variation 1 для того, чтобы размыть оба изображения (текущее и последующее).
Надеемся, что вам понравился наш сегодняшний эксперимент!
Смотреть демо | Скачать архивом