Інтерактивна 3d галерея на css і jquery

Іноді з`являється така проблема, як краще і креативніше розташувати кілька зображень або фотографій із загальною темою в одному місці. Як варіант можна створити слайдер (тим більше їх величезна кількість). Але в цьому уроці ми створимо інтерактивну 3D галерею за допомогою CSS3 і jQuery.

Реальний приклад можна побачити тут:

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

Кілька днів тому був урок "Чудова інтерактивна 3D модель", можливо він вас зацікавить:

Чудова інтерактивна 3D модель

Відео: Верстка адаптивної CSS галереї

На жаль даний метод працює тільки в WebKit браузерах. Деякі відразу можуть сказати «так який в цьому сенс», «навіщо така галерея, яка працює лише в певних браузерах», але технології ніколи не стоять на місці, і незабаром, я сподіваюся, буде підтримка майже всіма браузерами.

HTML частина

Тут ми маємо в своєму розпорядженні наші зображення на сторінці з обтіканням зліва:

+12345678910111213141516171819

lt;div class="Gallery"gt;lt;div class="Item"gt;lt;img src="Images / c2NAjXD.jpg" align="Left"gt;lt;span class="Caption"gt;lt;h1gt; SiteHere.RUlt;/h1gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laborislt;/pgt;lt;/spangt;lt;/divgt;lt;div class="Item"gt; ...lt;/divgt; ...lt;/divgt;

CSS частина

Потім прописуємо наступні стилі:

Відео: jQuery # 8: галерея зображень (без плагінів)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103

.gallery {margin: 0 auto-width: 700px-}.gallery .item{cursor: pointer-position: relative-display: block-float: left-margin: 0 50px -175px-z-index: 1-transform-origin:20% 40%--webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg)--webkit-transition-property: all--webkit-transition-duration: 0.7s--moz-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg)--moz-transition-property: all--moz-transition-duration: 0.7s-}.gallery .item: hover {z-index: 2--webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2)--moz-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2)-}.gallery .item.clicked{z-index: 3--webkit-transform:none--moz-transform:none-}.gallery .item .caption{display: none-border-radius: 3px 3px-font-family: helvetica, arial-background: white-padding: 10px-box-shadow: 0 1px 2px rgba(0,0,0,0.45)-width: 300px-}.gallery .item .caption: after{background-color: #fff-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 )-content: ""-display: block-height: 15px-left: -5px-position: absolute-top: 50%-margin-top: -7px--webkit-transform: rotate( 45deg )--moz-transform: rotate( 45deg )-width:15px-}.gallery .item.left .caption: after{right: -8px-left: auto-box-shadow: 2px -1px 2px 0 rgba( 178, 178, 178, .4 )-}.gallery .item .caption h1{color: black-font-weight: 100-text-align: center-letter-spacing: -1px-margin: 0 0 5px-margin-bottom: 10px-border-bottom: 1px solid #EFEFEF-padding-bottom: 10px-}.gallery .item .caption p{color: # 444-font-weight: 100-}.gallery .item.clicked .caption{position: absolute-top: 25px-display: inline--webkit-transition-property: display--webkit-transition-duration: 0.7s--moz-transition-property: display--moz-transition-duration: 0.7s-}.gallery .item.clicked.right .caption {left: 115%-margin-left: 15px-}.gallery .item.clicked.left .caption {right: 115%-margin-right: 15px-}.gallery .item.clicked img {box-shadow:0 0 25px rgba(0,0,0,0.25)--webkit-transform: scale(1.25)--moz-transform: scale(1.25)-}.gallery .item img {-webkit-transition-property: all--webkit-transition-duration: 0.7s--moz-transition-property: all--moz-transition-duration: 0.7s-box-shadow:-10px 10px 25px rgba(0,0,0,0.25)-max-width: 100%-width: 190px-height: 340px-}

Відео: jQuery 3 1 Галерея зображень за допомогою Slimbox

jQuery частина

І останнім кроком залишилося додати подію при натисканні:

12345678910111213141516171819202122232425

$(document).ready(function () {$(".item").click(function (e) {e.stopPropagation()-$(".item").removeClass("Clicked")-$(this).toggleClass("Clicked")-$("Body").addClass("Showing-item")-var offset = $(this).offset()-var pos = offset.left + $(this).width()var center = $(".gallery").width() / 2-if (pos gt; center) {var align = "Left"-} else {var align = "Right"-}$(this).removeClass(".left, .right").addClass(align)-return false-})-$(`Html`).click(function () {$(".item").removeClass("Clicked")-$("Body").removeClass("Showing-item")-})-})-

Початківцям сайтостроітеля доводиться самостійно вибирати як навчатися. Книги, курси, очно або дистанційно? А може відеоуроки допоможуть? Але хіба не краще вивчати основи HTML і ВЕБ дизайну поруч з професіоналом? У будь-якому випадку вам буде потрібно завзятість, трохи вільного часу і гаряче бажання :).