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

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

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

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

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

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

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

HTML часть

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

1 2 3 4 5 6 7 8 9 10 11 12 13 &lt,div class=grid-wrap&gt, &lt,div class=grid&gt, &lt,figure&gt,&lt,img src=img/1.jpg alt=img01/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/5.jpg alt=img05/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/8.jpg alt=img08/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/2.jpg alt=img02/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/3.jpg alt=img04/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/4.jpg alt=img03/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/9.jpg alt=img09/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/6.jpg alt=img06/&gt,&lt,/figure&gt, &lt,figure&gt,&lt,img src=img/7.jpg alt=img07/&gt,&lt,/figure&gt, &lt,/div&gt, &lt,/div&gt,

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

1 2 3 4 5 6 7 &lt,div class=content&gt, &lt,div&gt, &lt,div class=dummy-img&gt,&lt,/div&gt, &lt,p class=dummy-text&gt,The only people…&lt,/p&gt, &lt,p class=dummy-text&gt,The only people…&lt,/p&gt, &lt,/div&gt, &lt,/div&gt,

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

1 2 &lt,span class=loading&gt,&lt,/span&gt, &lt,span class=icon close-content&gt,&lt,/span&gt,

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-bezier0,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 &gt, div display: block, position: absolute, width: 100%, height: 100%, backface-visibility: hidden, .placeholder .front img width: 100%, height: 100%, .placeholder .back background: white, transform: rotateY180deg,

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

1 2 3 .view-full .placeholder transition: all 0.5s 0.1s cubic-bezier0,0,0.25,1,

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

1 2 3 4 5 6 7 .vertical .view-full .placeholder transform: translateZ1500px rotateX-179.9deg, .horizontal .view-full .placeholder transform: translateZ1500px rotateY-179.9deg,

Javascript часть

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

1 2 3 4 5 6 &lt,script src=js/classie.js&gt,&lt,/script&gt, &lt,script src=js/helper.js&gt,&lt,/script&gt, &lt,script src=js/grid3d.js&gt,&lt,/script&gt, &lt,script&gt, new grid3D( document.getElementById( ‘grid3d’ ) ), &lt,/script&gt,

Вывод

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: