—»     —»   Полноэкранный эффект размытия на HTML5
  Раздел: Руководства   Комментариев: 1  

Полноэкранный эффект размытия на HTML5



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

Мы будем использовать быстрый Stack Blur, почти Gaussian blur для Canvas от Марио Клингеманна (Mario Klingemann) из команды Quasimondo.

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

Полноэкранный эффект размытия на HTML5

Как здесь всё устроено

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

Это можно установить посредством изменения параметра variation от 1 до 2:

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

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

Демо

Демо 1: Здесь мы используем variation 2, отображая последующее изображение без размытия.
Демо 2: В данном демо мы используем variation 1 для того, чтобы размыть оба изображения (текущее и последующее).

Надеемся, что вам понравился наш сегодняшний эксперимент!

Смотреть демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 8741   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 24 декабря 2011 @ 14:59
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Отличный еффект! Правда сдерживает пока большое количество людей сидящих на ИЕ 7,8, которые хтмл5 не кажут. sad


--------------------
я дизайнер - http://imdesigner.ru
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930