Интересная галерея для сайта в стиле Polaroid RUDEBOX_miniВ данном уроке мы рассмотрим как создать весьма интересную галерею для сайта, а именно стилизованную под разбросанные фотографии с полароида. В демонстрации мы рассмотрим несколько вариантов, в которых будет представлен разный вариант отображение и подписи к ним. Кроме этого мы будем использовать SVG графику. Мы используем скрипт плоской галерейки, где все фотографии разбросаны в случайном порядке. При выборе какого-то конкретного изображения, оно перемещается в центр, а все остальные располагаются вокруг него.

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

Шаг 1. HTML

Для самой галереи мы используем следующий html код. Поправьте его для вставки своих собственных изображений:

Количество итераций при перемешивании может быть задано в атрибуте data-shuffle-iteration.  Класс “photostack-start” используется для отображения изначального состояния контейнера галереи. При клике, первое изображение отобразится посередине, а все остальные будут расположены вокруг него.

Интересная галерея для сайта в стиле Polaroid RUDEBOX

Элемент div с классом “photostack-back” может использоваться как контейнер с подробной информацией о фотке.

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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