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

Демонстрация работы – Скачать исходный код

Мы хотим поделиться с вами небольшой идеей для объемной галереи изображений или чего-то подобного. Основная задача — показать уменьшенные изображения с помощью интересного эффекта: текущее изображение будет открыто в средине, а галерея уменьшенных изображений объемно развернется.

Объем очень популярен. С помощью свойств CSS объемных трансформация мы можем узнать о новых способах работы с объемом и создания глубины и реалистичности для обычно плоских элементов.

Посмотрите на эти вдохновляющие идеи на сайте Dribbble:

• Прокрутите, чтобы открыть (разворачивающееся) от Craig ‘iPhaze’ Philips
• UX/iOS/UI идея для iPhone с видео от Cuberto

Пожалуйста, обратите внимание: этот эффект будет работать только в браузерах, поддерживающих соответствующие свойства CSS.

Изображения, использованные в примере, созданы Angelo González и распространяются под лицензией «Атрибуция» 2.0 стандартная.

Приставок для разных браузеров не будет в коде ниже, но Вы, конечно, найдете их в исходниках.

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

Итак, из этой структуры

<div id="th-wrap">
<!-- текущее изображение -->
<img src="images/1.jpg"/>
<!-- уменьшенное изображение -->
<div>
<ul>
<li>
<a href="#">
<img src="images/thumbs/1.jpg" />
</a>
</li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<!-- ... -->
</ul>
</div>
</div>

Мы хотим создать такую структуру:

<div id="th-wrap">
<div></div>
<div>
<div>
<ul>
<!-- ... -->
</ul>
<div></div>
</div>
</div>
<div>
<div style="display: block; ">
<ul>
<!-- ... -->
</ul>
<div></div>
</div>
</div>
<div></div>
</div>

Блоки класса th-part будут анимированными. У каждого блока высота будет равна половине высоты основного блока — 150 пикселям.

.th-wrap .th-part {
width: 100%;
height: 150px;
position: relative;
overflow: hidden;
background: #f0f0f0;
}

У двух внешних блоков, в которых не будет содержимого, фоном будет текущее изображение:

.th-wrap .th-part:nth-child(1),
.th-wrap .th-part:nth-child(4) {
background: #000 url(../images/1.jpg) no-repeat top left;
z-index: 100;
}
.th-wrap .th-part:nth-child(4) {
transform: translateY(-300px);
background-position: bottom left;
}

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

Вторая и третья части будут содержать блоки класса th-inner из изначальной структуры, и мы повернем их в пространстве:

.th-wrap .th-part:nth-child(2){
transform-origin: center bottom;
transform: translateY(-150px) translateZ(-150px) rotateX(-90deg);
}
.th-wrap .th-part:nth-child(3) {
transform-origin: center top;
transform: translateY(-150px) translateZ(-150px) rotateX(90deg);
}

Мы хотим создать копию содержимого и подтянуть ее вверх, установив значение внешнего отступа в -150 пикселей блоку класса th-inner:

.th-wrap .th-part:nth-child(3) .th-inner{
margin-top: -150px;
}

Когда мы нажмем на кнопку, чтобы переключить изображение, мы добавим класс th-active основному блоку:

.th-wrap.th-active .th-part:nth-child(2),
.th-wrap.th-active .th-part:nth-child(3){
transform: translateY(-150px) translateZ(0px) rotateX(0deg);
}
.th-wrap.th-active .th-part:nth-child(1),
.th-wrap.th-active .th-part:nth-child(4){
transform: translateY(-150px);
}

Конечно, нам понадобится добавить переходов соответствующим элементам. Первый переход будет для всех частей, но затем мы переопределим функции времени для некоторых ситуаций, чтобы все работало гладко. Важно понимать, что переход, определенный для блоков класса th-part, будет применяться, когда закроется просмотр уменьшенных изображений, так как мы переопределили переход для активного состояния. Так что, когда мы открываем просмотр уменьшенных изображений, мы хотим, чтобы у второй и третей части была функция времени ease-in-out:

.th-wrap .th-part {
transition: all 500ms ease-out;
}

.th-wrap .th-part:nth-child(1),
.th-wrap .th-part:nth-child(4) {
transition: all 480ms ease-in-out;
}

.th-wrap.th-active .th-part:nth-child(2),
.th-wrap.th-active .th-part:nth-child(3) {
transition-timing-function: ease-in-out;
}
.th-wrap.th-active .th-part:nth-child(1),
.th-wrap.th-active .th-part:nth-child(4) {
transition: all 400ms ease-in-out;
}

Тонкая настройка времени и функций времени зависит от значений смещения блоков. Если они будут короче, разница может быть немного меньше.

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

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

Надеемся, этот урок вдохновит вас.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Выделение и просмотр изображений с использованием jQuery
• Создание трехмерной интерактивной галереи с использованием CSS и jQuery
• Простая контент-галерея с использованием jQuery и CSS3