Эффект размытия при просмотре изображений

Эффект размытия при просмотре изображений

Вы не раз сталкивались с различными способами оформления галерей — от стандартных галерей WordPress до созданных с помощью специальных плагинов. Кроме того возможна интеграция самых интересных и необычных эффектов. В этой статье мы рассмотрим эффект размытия в момент переключения изображений. Для этого применяется технология SVG.

Перейдите по ссылке ниже, чтобы попробовать эффект в действии

Демо Скачать

Итак, переходим к установке нашей галереи: поработаем с HTML. Для начала, как и всегда, подключим необходимые библиотеки между тегами <head>. В нашем случае это — jquery.min.js и TweenMax.min.js. Нужный стиль -  gallery.css.

Далее, идем в конец части с тегом <body>, где помещаем скрипт gallery.js:

На этом работа с библиотеками и стилями завершена. Приступим к самой структуре. Следующий код необходимо разметить сразу после того, как открыли тег <body>:

Галерея будет выглядеть следующим образом:

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

Вот так просто и быстро можно оформить галерею с эффектом размытия, придать ей гораздо более интересный вид. Здесь же есть интересная деталь навигации — переключать изображения можно не только кнопками, но и простым перетягиванием мышью.


Оставить комментарий