X
Юрий Немец

3D сетка на сайте или потрясающая галерея

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

Похожие материалы:

Пример можно увидеть здесь:

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



HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="grid-wrap">
    <div class="grid">
        <figure><img src="img/1.jpg" alt="img01"/></figure>
        <figure><img src="img/5.jpg" alt="img05"/></figure>
        <figure><img src="img/8.jpg" alt="img08"/></figure>
        <figure><img src="img/2.jpg" alt="img02"/></figure>
        <figure><img src="img/3.jpg" alt="img04"/></figure>
        <figure><img src="img/4.jpg" alt="img03"/></figure>
        <figure><img src="img/9.jpg" alt="img09"/></figure>
        <figure><img src="img/6.jpg" alt="img06"/></figure>
        <figure><img src="img/7.jpg" alt="img07"/></figure>
    </div>
</div>

И вторая часть, подробное описание:

1
2
3
4
5
6
7

<div class="content">
    <div>
        <div class="dummy-img"></div>
        <p class="dummy-text">The only people...</p>
		<p class="dummy-text">The only people...</p>
	</div>
</div>

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

1
2

<span class="loading"></span>
<span class="icon close-content"></span>


CSS часть

Задаем стили для блока, в котором находятся изображения:

1
2
3
4
5
6
7
8
9
10
11
12
13

grid-wrap {
    margin: 10px auto 0;
    max-width: 1090px;
    width: 100%;
    padding: 0;
    perspective: 1500px;
}
 
.grid {
    position: relative;
    transition: all 0.5s cubic-bezier(0,0,0.25,1);
    transform-style: preserve-3d;
}

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

1
2
3
4
5
6
7

.view-full .grid {
    transform: translateZ(-1500px);
}
 
.grid figure.active {
    opacity: 0;
}

Прописываем необходимые действия при повороте:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.grid .placeholder {
    pointer-events: none;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.5s ease-out;
}
 
.placeholder > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
 
.placeholder .front img {
    width: 100%;
    height: 100%;
}
 
.placeholder .back {
    background: white;
    transform: rotateY(180deg);
}

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

1
2
3

.view-full .placeholder {
    transition: all 0.5s 0.1s cubic-bezier(0,0,0.25,1);
}

Для вертикального и горизонтального поворота разные стили:

1
2
3
4
5
6
7

.vertical .view-full .placeholder {
    transform: translateZ(1500px) rotateX(-179.9deg);
}
 
.horizontal .view-full .placeholder {
    transform: translateZ(1500px) rotateY(-179.9deg);
}


Javascript часть

И подключаем необходимые плагины для правильного отображения галереи:

1
2
3
4
5
6

<script src="js/classie.js"></script>
<script src="js/helper.js"></script>
<script src="js/grid3d.js"></script>
<script>
    new grid3D( document.getElementById( 'grid3d' ) );
</script>


Вывод

Первой мыслью мне в голове была — это красивая галерея может из этого получиться. Но также можно красиво оформить новости, или диски с продуктами(для инфобизнесменов), а также многое другое, стоит лишь подключить фантазию.


Успехов!

Категории: CSS3