331 Вы не раз сталкивались с различными способами оформления галерей — от стандартных галерей WordPress до созданных с помощью специальных плагинов. Кроме того возможна интеграция самых интересных и необычных эффектов. В этой статье мы рассмотрим эффект размытия в момент переключения изображений. Для этого применяется технология SVG.
Перейдите по ссылке ниже, чтобы попробовать эффект в действии
Итак, переходим к установке нашей галереи: поработаем с HTML. Для начала, как и всегда, подключим необходимые библиотеки между тегами <head>. В нашем случае это — jquery.min.js и TweenMax.min.js. Нужный стиль - gallery.css.
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="css/gallery.css" /> <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> |
Далее, идем в конец части с тегом <body>, где помещаем скрипт gallery.js:
|
1 |
<script src="js/gallery.js"></script> |
На этом работа с библиотеками и стилями завершена. Приступим к самой структуре. Следующий код необходимо разметить сразу после того, как открыли тег <body>:
|
1 2 3 4 5 6 7 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" /> </filter> </defs> </svg> |
Галерея будет выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div class="gallery"> <ul class="gallery-pictures"> <li class="gallery-picture"> <img src="img/1.jpg" alt="img01"> </li> <li class="gallery-picture"> <img src="img/2.jpg" alt="img02"> </li> <li class="gallery-picture"> <img src="img/3.jpg" alt="img03"> </li> <li class="gallery-picture"> <img src="img/4.jpg" alt="img04"> </li> <li class="gallery-picture"> <img src="img/5.jpg" alt="img05"> </li> <li class="gallery-picture"> <img src="img/6.jpg" alt="img06"> </li> <li class="gallery-picture"> <img src="img/7.jpg" alt="img07"> </li> <li class="gallery-picture"> <img src="img/8.jpg" alt="img08"> </li> <li class="gallery-picture"> <img src="img/9.jpg" alt="img09"> </li> </ul> <div class="gallery-pagination"> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> </div> </div> |
В этом коде перечень изображений, выбранных для галереи, находится в строках 2-30, а далее размещаются кнопки управления изображениями. Соответственно, количество маркеров — это число изображений.
Вот так просто и быстро можно оформить галерею с эффектом размытия, придать ей гораздо более интересный вид. Здесь же есть интересная деталь навигации — переключать изображения можно не только кнопками, но и простым перетягиванием мышью.
