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

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

Источник