3d сітка на сайті або приголомшлива галерея

Відео: Модульна сітка для дизайну сайту. урок 2

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

Схожі матеріали:

Галерея зображень на jQuery з цікавим ефектом
Інтерактивна 3D галерея на CSS і jQuery
Оригінальна анімована галерея на CSS3

Приклад можна побачити тут:

Відео: Модульна сітка в веб-дизайн

Подивитися прімерСкачать

HTML частина

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

12345678910111213

lt;div class="Grid-wrap"gt;lt;div class="Grid"gt;lt;img src="Img / 1.jpg" alt="Img01"/gt; lt;/figuregt;lt;img src="Img / 5.jpg" alt="Img05"/gt; lt;/figuregt;lt;img src="Img / 8.jpg" alt="Img08"/gt; lt;/figuregt;lt;img src="Img / 2.jpg" alt="Img02"/gt; lt;/figuregt;lt;img src="Img / 3.jpg" alt="Img04"/gt; lt;/figuregt;lt;img src="Img / 4.jpg" alt="Img03"/gt; lt;/figuregt;lt;img src="Img / 9.jpg" alt="Img09"/gt; lt;/figuregt;lt;img src="Img / 6.jpg" alt="Img06"/gt; lt;/figuregt;lt;img src="Img / 7.jpg" alt="Img07"/gt; lt;/figuregt;lt;/divgt;lt;/divgt;

І друга частина, докладний опис:

lt;div class="Content"gt;lt;divgt;lt;div class="Dummy-img"gt; lt;/divgt;lt;p class="Dummy-text"gt; The only people ...lt;/pgt;lt;p class="Dummy-text"gt; The only people ...lt;/pgt;lt;/divgt;lt;/divgt;

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

12	lt;span class="Loading"gt; lt;/spangt;lt;span class="Icon close-content"gt; lt;/spangt;

CSS частина

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

12345678910111213

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, щоб віддалити фон:

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

Прописуємо необхідні дії при повороті:

123456789101112131415161718192021222324

.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: rotateY(180deg)-}

Відео: Сітка 3Ds Max. VRayEdgesTex. Рендер сітки в 3D Max

Коли з`являється детальна інформація, тобто маленька затримка:

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

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

Відео: Як пошуковики й конкуренти знайдуть вашу сітку сайтів

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

javascript частина

І підключаємо необхідні плагіни для правильного відображення галереї:

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / helper.js"gt; lt;/scriptgt;lt;script src="Js / grid3d.js"gt; lt;/scriptgt;lt;scriptgt; new grid3D (document.getElementById ( `grid3d ")) -lt;/scriptgt;

висновок

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

Успіхів!

Поділися в соц мережах: