Popup галерея для сайта при помощи CSS3 и JS

Красивая галерея для сайта является неотъемлемой его частью. Разработчики прибегают к разным вариациям создания такой галереи, обычно это простое модальное окно, которое не украшено никакими эффектами и служит для простого отображения картинки. Но что если пойти дальше и разнообразить данное окно, добавив эффект анимации, и не обычное, которое есть уже у всех, благодаря стандартным модулям и плагинам. В данном уроке мы рассмотрим как же создать разработчику сайта простую Popup галерея для сайта с красивой анимацией.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

По умолчанию у нас будет сетка изображений, которые мы взяли на бесплатном репозиторие изображений. При нажатии на картинку будет происходить достаточно простая но необыкновенная анимация, кроме этого окно будет стилизовано приятными стилями с тенями с эффектом blur и подписью к изображению. Давайте приступим к созданию данной галереи.

Шаг 1. HTML

Как обычно, первым, что нам необходимо сделать это создать разметку, а именно контейнер, в котором будет заключены в стили наши изображения и путь к ним.

<figcaption>Daytona Beach <small>United States</small></figcaption>

</figure>

<figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption>

</figure>

</div>

Также у нас есть подписи к изображения. Также не забывайте, что в разметку страницы Вам необходимо подключить стили и скрипты с правильным путем к ним.

Шаг 2. CSS

Следующий шаг будет стилизация и построение разметки. На самом деле мы хотели минимизировать стили, чтобы галерея оставалась просто и не габаритной. Для начала определим общие стили галереи:

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);

}

Затем мы добавляем базовые стили для развернутого окна:

.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;

}

И стилизацию изображения которое у нас будет находиться в данном окне, тени и стили:

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;

}

Последним шагом станет добавления кнопки закрытия окна:

.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. Он нам нужен для нормальной работы закрытие и открытия окна, а также мелких функций.

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()

В результате у нас получилась прекрасная галерея которая достаточно простая, и не похожа на другие, стандартные решения. Кроме этого галерея адаптивная, что упростит отображение на различных девайсах.