Как создаем галерею миниатюр в стиле OS X | RUDEBOXКрасивая галерея это всегда привлекает посетителей, удобность и простота это залог успеха проекта, ведь все гениальное это просто. Если Вам приходилось работать на оборудованию мастеров из Купертино, то замечали весьма интересную анимацию разворота окон и приложений. В данном уроке мы рассмотрим как создать галерею миниатюр которые будут размещаться на нижнем доке, а при нажатии на них будет происходит плавный разворот в стиле OS X. Для данной реализации нам понадобится весьма увесистый код, но поверьте, результат оправдывает проделанную работу.

На нижней док, станции у нас будет размещаться шесть изображений, квадратной формы, это реализовано для простоты просмотра изображений. И так, давайте приступим.

Шаг 1. HTML

У нас есть класс которым мы обвернули наши изображения с подписями:

Эта вся наша разметка, по желанию количество изображений, конечно, можно увеличить, перейдем к следующему шагу.

Как создаем галерею миниатюр в стиле OS X | RUDEBOX

Шаг 2. CSS

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

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

Шаг 3. JS

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

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

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

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