Создание трехмерной интерактивной галереи с использованием CSS и jQuery

29 января 2014 | Опубликовано в css | 2 Комментариев »

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

Демонстрация работы

Создание трехмерной интерактивной галереи с использованием CSS и jQuery.

Шаг 1: раскладываем изображения

HTML

<div>

<div>

<img align="left" src="img/c2NAjXD.jpg"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>

<div>

<img align="left" src="img/OYlw7Pw.jpg?"/>

</div>

<div>

<img align="left" src="img/MVammek.jpg?"/>

</div>

<div href="#">

<img align="left" src="img/gfp57KR.png"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>
</div>

CSS

body {

margin: 0;

}

.gallery {

margin: 0 auto;

width: 700px;

}

.gallery .item{

cursor: pointer;

position: relative;

display: block;

float: left;

z-index: 1;

}

.gallery .item img {

-webkit-transition-property: all;

-webkit-transition-duration: 0.7s;

box-shadow: -10px 10px 25px rgba(0,0,0,0.25);

max-width: 100%;

width: 190px;

height: 340px;
}

Сначала мы просто выстроим набор изображений, которые мы хотим сделать интерактивными в нашей галерее, с помощью вышеприведенной разметки. Заметьте, что все указанные изображения — заготовки, так что вы можете свободно поменять на что хотите. Если вы меняете изображения, мы советуем найти картинки одинакового размера, чтобы они были расположены правильно. Если же нужные вам изображения разного размера, вам могут понадобиться плагины, такие как Woomark или Masonry, чтобы помочь расположить картинки разного размера в одной сетке.

Шаг 2: преобразование

HTML

<div>

<div>

<img align="left" src="img/c2NAjXD.jpg"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>

<div>

<img align="left" src="img/OYlw7Pw.jpg"/>

</div>

<div>

<img align="left" src="img/MVammek.jpg"/>

</div>

<div href="#">

<img align="left" src="img/gfp57KR.png"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>
</div>

CSS

body {

background: url(img/LBONKMh.jpg) repeat fixed right bottom;

margin: 0;

}

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

}

.gallery .item img {

-webkit-transition-property: all;

-webkit-transition-duration: 0.7s;

box-shadow: -10px 10px 25px rgba(0,0,0,0.25);

max-width: 100%;

width: 190px;

height: 340px;
}

Теперь мы применим к изображению очень полезную функцию transform, которая позволит нам свободно преобразовывать любой объект HTML. Хотя это и полезно, применение функции таким способом вызовет складывание изображений одного над другим, а нам это не нужно, так что, чтобы избежать этого, мы добавили обходной путь для внешнего отступа, чтобы изображения были разделены достаточно, и нам было удобно с ними взаимодействовать. Мы также добавили переходный стиль, который будет использоваться в интерактивной части в следующем шаге.

Шаг 3: взаимодействие.

HTML

<div>

<div>

<img align="left" src="img/c2NAjXD.jpg"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>

<div>

<img align="left" src="img/OYlw7Pw.jpg?1"/>

</div>

<div>

<img align="left" src="img/MVammek.jpg?1"/>

</div>

<div href="#">

<img align="left" src="img/gfp57KR.png"/>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

</div>
</div>

CSS

body {

background: url(img/LBONKMh.jpg) repeat fixed right bottom;

margin: 0;

}

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

}

.gallery .item img {

-webkit-transition-property: all;

-webkit-transition-duration: 0.7s;

box-shadow: -10px 10px 25px rgba(0,0,0,0.25);

max-width: 100%;

width: 190px;

height: 340px;

}

.gallery .item:hover {

z-index: 2;

-webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);

}

.gallery .item.clicked{

z-index: 3;

-webkit-transform:none;
}

$(document).ready(function() {

$(".item").click(function (e) {

e.stopPropagation();

$(".item").removeClass("clicked");

$(this).toggleClass("clicked");

$("body").addClass("showing-item");

});

$('html').click(function() {

$(".item").removeClass("clicked");

$("body").removeClass("showing-item");

});
});

Убедитесь, что Вы включили jQuery в ваш файл HTML. Желательно, любую версию новее 1.91. На этом этапе мы сделаем нашу галерею немного интерактивной, добавив эффект при наведении указателя мыши и сделав объект активируемым щелчком по кнопке мыши. Для эффекта при наведении указателя мыши мы просто добавим стиль hover каждому изображению, немного изменим его размер, чтобы показать пользователю, что на него можно нажать. Для этой функции нажатия нам понадобится jQuery, чтобы помочь нам определить класс для состояния нажатия. Как вы можете видеть в коде JS, новый класс clicked будет добавляться каждый раз, когда вы нажимаете на изображения. Этот класс удалит все преобразования, которые мы временно делали в предыдущем шаге, чтобы пользователи увидели каждое изображение, как было задумано. Вторая часть должна очистить нажатое состояние, когда пользователь выберет что-нибудь за пределами изображения.

Шаг 4: добавим подписи.

HTML

<div>

<div>

<img align="left" src="img/c2NAjXD.jpg"/>

<span>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</span>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

<span>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</span>

</div>

<div>

<img align="left" src="img/OYlw7Pw.jpg?1"/>

<span>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</span>

</div>

<div>

<img align="left" src="img/MVammek.jpg?1"/>

<span>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</span>

</div>

<div href="#">

<img align="left" src="img/gfp57KR.png"/>

<span>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</span>

</div>

<div>

<img align="left" src="img/FeCziip.png"/>

<div>

<h1>

BucketListly.com

</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

</p>

</div>

</div>
</div>

CSS

body {

background: url(img/LBONKMh.jpg) repeat fixed right bottom;

margin: 0;

}

body.showing-item .item:not(.clicked){

-webkit-filter: blur(2px) grayscale(0.5) opacity(0.8);

}

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

}

.gallery .item:hover {

z-index: 2;

-webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);

}

.gallery .item.clicked{

z-index: 3;

-webkit-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: "&#092;&#048;0a0";

display: block;

height: 15px;

left: -5px;

position: absolute;

top: 50%;

margin-top: -7px;

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

}

.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);

}

.gallery .item img {

-webkit-transition-property: all;

-webkit-transition-duration: 0.7s;

box-shadow: -10px 10px 25px rgba(0,0,0,0.25);

max-width: 100%;

width: 190px;

height: 340px;
}

$(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 > 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 и стили CSS, чтобы блок подписи выглядел как выносная цитатная рамка. Стили здесь довольно простые, кроме нового стиля, который мы используем, чтобы придать резкость изображению, на которое нажали, и размыть все остальное. Этот стиль называется filter, и он позволяет нам управлять фотографиями, добавляя им эффекты, начиная от размытия и заканчивая сепией. В этом шаге мы просто размыли все объекты, которые не находятся в нажатом состоянии.

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

Заключение

Теперь у вас есть прекрасная трехмерная интерактивная галерея для вашего веб-сайта. Не стесняйтесь настраивать код, как вам удобно.

Автор урока Pete R.

Перевод — Дежурка

Смотрите также:

Опубликовано в css, января 29, 2014
Метки: css, Jquery, jquery галерея, jquery плагины, верстка, галерея, сss галереи, урок css, урок верстка

�

Создание трехмерной интерактивной галереи с использованием CSS и jQuery

Создание трехмерной интерактивной галереи с использованием CSS и jQuery.

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые