Полноэкранный слайдер + эффект размытия на HTML5! | Vladmaxi.net
ГлавнаяВеб-разработчикуHTML и HTML5Полноэкранный слайдер + эффект размытия на HTML5!
Дата: 22.07.2013 в 13:51 | Просмотров: 5620

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

Скачать полноэкранный слайдер с эффектом размытия
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня Вашему вниманию представлен полноэкранный слайдер, с эффектом размытия и использования HTML5. Используя Canvas, мы хотим, добавить эффект размытия изображения при переходе к следующему изображению. Также обязательно посмотрите популярный эффект Sepia на HTML5 здесь.

Создавая у себя на сайте такой слайдер, от Вас конечно же, требуется использовать качественные картинки, для гладкого эффекта. В нашем случае мы имеем по паре одинаковых изображений (1-ый для слайда, а 2-ой для миниатюры).

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

Основная идея в том, чтобы добавить к нашей структуре картинку, которая будет служить в качестве фонового изображения. Мы добавим Canvas элемент, который будет служить размытием для изображений.

Когда меняются изображения, мы добавим Canvas размытие для текущего изображение. После этого можно показывать либо сразу новые изображения или показать его сначала размытым, а затем “обычным”.

В общем Вы можете менять variation на значение 1 или 2:

Опции настройки эффекта размытия

  • speed – скорость анимации между каждым переходом (от обычной резкости до размытия);
  • variation – вариант смены слайдов (значение "1" – после смены картинки сразу показать обычное, не размытое; "2" – при смене изображения, сразу показать его размытым, а потом “обычным”);
  • blurFactor – радиус для эффекта размытия (можете экспериментировать).

Демо

  • Пример 1: здесь мы используем variation: 2, показывая следующее изображения сразу “обычным”, без размытия;
  • Пример 2: в этом примере мы используем variation 1 для размытия, как текущего изображения, так и следующего при изменении слайдов;
  • Пример 3: автоматическая смена слайдов (скорость назначена в slideshow_interval, в миллисекундах).

Надеюсь, что Вам понравился этот небольшой эксперимент и он оказался для Вас полезен!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Подскажите пожалуйста, а как сменить название в тегах …
      сначала меняется, но когда сменить слайд и вернутся назад, то будет другое название. откуда оно берется?

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Извините за задержку с ответом. Что именно у вас не получается? Я протестировал, для смены названия нужно в каждом изображении img, сменить параметр title, который и будет выводить желаемой вами название. Я вас правильно понял?

    1. Я всегда с удовольствием посещаю этот сайт. Ведь есть очень много полезных материалов,

Добавить комментарий