Галерея фотографий (15 креативных эффектов) — галереи изображений

Галерея фотографий

Все 15 примеров смотрите по ссылке ниже (также их можно скачать):

Посмотреть примерСкачать

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

• Галерея как у Google
• 3D сетка на сайте или потрясающая галерея
• Галерея изображений на jQuery с интересным эффектом
• Интерактивная 3D галерея на CSS и jQuery
• Оригинальная анимированная галерея на CSS3

Разметка следующая:

1
2
3
4
5
6

<figure class="stack stack-sidegrid">
    <img src="img/1.png" alt="img01"/>
    <img src="img/3.png" alt="img03"/>
    <img src="img/4.png" alt="img04"/>
    <img src="img/2.png" alt="img02"/>
</figure>

Все изображения, кроме последнего, имеют абсолютное позиционирование:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.stack {
    margin: 20px auto;
    width: 400px;
    padding: 0;
    position: relative;
    max-width: 100%;
}
 
.stack img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
 
.stack img:last-child {
    position: relative;
}

Например, рассмотрим пример, при котором изображения размещаются в виде таблицы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.stack-bouncygrid.active img {
    transform: scale(0.48);
}
 
.stack-bouncygrid.active img:nth-child(4) {
    transform-origin: 0 0;
}
 
.stack-bouncygrid.active img:nth-child(3) {
    transform-origin: 100% 0;
}
 
.stack-bouncygrid.active img:nth-child(2) {
    transform-origin: 0 100%;
}
 
.stack-bouncygrid.active img:first-child {
    transform-origin: 100% 100%;
}

Как видите всего несколько строк кода в файле стилей.

Вывод

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

Для просмотра этого эффекта конечно используется Javascript, но я не стал писать об этом в статье. Там лишь нужно подключить две библиотеки (classie.js и main.js) и вставить код переключателя (всё это можно взять из демо). А не стал я писать из-за того, что вы можете захотеть сделать такой эффект без переключателя (то есть чтобы изображения сразу располагались в том виде сразу при загрузке страницы).

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/03/05/simple-stack-effects/