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

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

Шаг 1. HTML

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

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

Шаг 2. CSS

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

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

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

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

Более детально стили можете рассмотреть в исходниках к данной статье. Давайте перейдем к следующему шагу.

Шаг 3. JS

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

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

Вот и все. Готово!

Читайте также: