Отправляет email-рассылки с помощью сервиса Sendsay

Уникальные уроки по теме сайтостроения

Подписаться Бесплатная новостная рассылка Подписчиков 2 RSS
←   Апрель 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
27.04.2014
13:59:08
14:00:27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://sitehere.ru
Открыта: 19-10-2013

Автор
Юрий Немец

Статистика

2 подписчиков
0 за неделю
←   Все выпуски   →

Уникальные уроки по теме сайтостроения 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

<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>

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

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>

Вывод

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

Успехов!
В избранное