Все для веб-дизайнера
Popup галерея для сайта при помощи CSS3 и JS
Красивая галерея для сайта является неотъемлемой его частью. Разработчики прибегают к разным вариациям создания такой галереи, обычно это простое модальное окно, которое не украшено никакими эффектами и служит для простого отображения картинки. Но что если пойти дальше и разнообразить данное окно, добавив эффект анимации, и не обычное, которое есть уже у всех, благодаря стандартным модулям и плагинам. В данном уроке мы рассмотрим как же создать разработчику сайта простую Popup галерея для сайта с красивой анимацией.
По умолчанию у нас будет сетка изображений, которые мы взяли на бесплатном репозиторие изображений. При нажатии на картинку будет происходить достаточно простая но необыкновенная анимация, кроме этого окно будет стилизовано приятными стилями с тенями с эффектом blur и подписью к изображению. Давайте приступим к созданию данной галереи.
Шаг 1. HTML
Как обычно, первым, что нам необходимо сделать это создать разметку, а именно контейнер, в котором будет заключены в стили наши изображения и путь к ним.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="gallery"> <figure> <img src="1.jpg" alt="" /> <figcaption>Daytona Beach <small>United States</small></figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption> </figure> </div> |
Также у нас есть подписи к изображения. Также не забывайте, что в разметку страницы Вам необходимо подключить стили и скрипты с правильным путем к ним.
Шаг 2. CSS
Следующий шаг будет стилизация и построение разметки. На самом деле мы хотели минимизировать стили, чтобы галерея оставалась просто и не габаритной. Для начала определим общие стили галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
img { display: block; } .gallery { position: relative; z-index: 2; padding: 10px; display: flex; flex-flow: row wrap; justify-content: space-between; transition: all .5s ease-in-out; transform: translateZ(0); &.pop { filter: blur(10px); } |
Затем мы добавляем базовые стили для развернутого окна:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.popup { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; opacity: 0; transition: opacity .5s ease-in-out .2s; &.pop { opacity: 1; transition: opacity .2s ease-in-out 0s; figure { margin-top: 0; opacity: 1; } } |
И стилизацию изображения которое у нас будет находиться в данном окне, тени и стили:
|
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 |
figcaption { position: absolute; bottom: 50px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)); z-index: 2; width: 100%; padding: 100px 20px 20px 20px; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 32px; small { font-size: 11px; display: block; text-transform: uppercase; margin-top: 12px; text-indent: 3px; opacity: .7; letter-spacing: 1px; } } .shadow { position: relative; z-index: 1; top: -56px; margin: 0 auto; background-position: center bottom; background-repeat: no-repeat; width: 98%; height: 50px; opacity: .9; filter: blur(16px) contrast(1.5); transform: scale(0.95, -0.7); transform-origin: center bottom; } } |
Последним шагом станет добавления кнопки закрытия окна:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 25px; height: 25px; cursor: pointer; background: url(#close); border-radius: 25px; background: rgba(0, 0, 0, .1); box-shadow: 0 0 3px rgba(0, 0, 0, .2); svg { width: 100%; height: 100%; } |
Более детально стили можете рассмотреть в исходниках к данной статье. Давайте перейдем к следующему шагу.
Шаг 3. JS
Правильную работу галереи у нас обеспечит небольшой код js. Он нам нужен для нормальной работы закрытие и открытия окна, а также мелких функций.
|
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 |
popup = { init: function(){ $('figure').click(function(){ popup.open($(this)); }); $(document).on('click', '.popup img', function(){ return false; }).on('click', '.popup', function(){ popup.close(); }) }, open: function($figure) { $('.gallery').addClass('pop'); $popup = $('<div class="popup" />').appendTo($('body')); $fig = $figure.clone().appendTo($('.popup')); $bg = $('<div class="bg" />').appendTo($('.popup')); $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig); $shadow = $('<div class="shadow" />').appendTo($fig); src = $('img', $fig).attr('src'); $shadow.css({backgroundImage: 'url(' + src + ')'}); $bg.css({backgroundImage: 'url(' + src + ')'}); setTimeout(function(){ $('.popup').addClass('pop'); }, 10); }, close: function(){ $('.gallery, .popup').removeClass('pop'); setTimeout(function(){ $('.popup').remove() }, 100); } } popup.init() |
В результате у нас получилась прекрасная галерея которая достаточно простая, и не похожа на другие, стандартные решения. Кроме этого галерея адаптивная, что упростит отображение на различных девайсах.
Вот и все. Готово!
Интересно:
| Опубликовал admin 15.04.2018 в 13:19, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...