Лого www.SiteHere.ru

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

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>

Вывод

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

Успехов!

3D сетка на сайте или потрясающая галерея 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
8 комментариев к записи
  • Max

    Торможение анимации давит на глаза…

     
    • Юрий

      А какой браузер вы используете? У меня Firefox 26.0 и анимация не тормозит.

       
  • артем

    здравствуйте. подскажите, пожалуйста, куда именно прописываются эти коды? как привязать свои изображения? где прописываются urlы?

     
    • Юрий

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

       
  • Саматакая

    Симпатично получилось, Юре большое спасибо. Возник маленький нюанс при установке шрифтов. Так в файле Demo.css прописываются пути к шрифтам из папки fonts/ codropsicons, в файле component.css прописываются пути к шрифтам из папки fonts/ fontawesome. Осталось не понятным как использовать шрифты находящиеся в папки fonts/ blokk, где они используются или прописываются на них пути. Или эти шрифты вообще не нужны?

     
  • Саматакая

    Несколько добрых советов!
    Вот несколько советов для тех, кто будет ставить эту фишку на сайт.
    Для того что бы улучшить читабельность всплывающего текста, бесполезно крутить оптику в CSS. (я имею в виду: opacity) Просто в файле component.css находим

    
    .dummy-text {
    	text-align: left;
    	margin: 0 auto;
    	padding: 10px 0;
    	color: #ddd;
    	font-size: 1em;
    	font-family: Arial, serif;
    }
    
    

    И там где color: #ddd; выставляем нужный цвет, например радикальный чёрный,
    color: #000;
    Для того что бы в сплывающей странице в верху была то же картинка, в HTML находим

    <div class="dummy-img"><div>

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

    <div class="dummy-img"><img src="http://Ваш Сайт/img/1.jpg" alt="Описание картинки"/></div>

    Размер картинки: ширина: 600px, высота: 400px.
    Красивого Вам сайта!

     
    • Юрий

      Спасибо за советы, я думаю, они обязательно кому-нибудь помогут 🙂

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *