Уроки мастерства


Фотогалерея с красивыми эффектами


Содержание урока

Галерея представляет из себя сетку с изображениями. Идеи включают в себя анимацию на открытие и закрытие элемента сетки, исчезновение сетки и итоговом виде фотогалереи.

Сегодня мы бы хотели поделиться с вами своим вдохновением и представить галерею для изображений с красивыми эффектами. Идея в том, чтобы анимировать элемент галереи, когда он открывается и закрывается, а так же в этот момент исчезают другие элементы галереи. Данная галерея может содержать любые изображения и будет всё выглядеть как что-то вроде фотоальбома. Общим эффектом для всех фото является анимация при нажатии на изображение. Фото при нажатии мы перемещаем в нужное место, масштабируем вверх и затем заменяем его более крупной версией.

Для демонстрации мы используем галерею, созданную by Masonry, популярные каскадные компоновки библиотеки созданной Dave DeSandro.

Все изображения в демо-версии мы позаимствовали на Unsplash.com это бесплатные фотографии фантастического качества.

Вот краткий обзор всех демок:
Демо 1: текущее изображение становится полноэкранным и накладывается название фотографии.
Демо 2: текущее изображение занимает половину экрана слева, а элементы галереи исчезают. Описание будет отображаться справа в полном размере.
Демо 3: текущее изображение нижней части экрана, а название отображается вверху над ним. Галерея исчезает “падая” вниз и гаснет с разными задержками каждая фотография.
Демо 4: эта демка показывает, вид галереи с миниатюрами навигации внизу и отображением фото в полный рост.
Демо 5: здесь галерея разбира на категории с описанием каждой.
Демо 6: последняя демо показывает, как элементы сетки могут быть анимированы с боков интересным образом для создания небольшого движения.

Скачать Демо



Технологии

CSS3
jQuery

Новые комментарии



    Оставить комментарий