Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки. Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.
В данном уроке мы рассмотрим весьма интересный способ реализации галереи миниатюр для портфолио. Несомненно данную галерею можно использовать не только для портфолио, а для прочих, креативных, проектов. И так, приступим.
Шаг 1. HTML
Нам необходимо создать список в виде неупорядоченного списка, и заключим это все в единый элемент Div, это оболочка будет использоваться для отображения сетки миниатюр изображений, стили будут созданы с помощью javascript, по этому css будут достаточно простыми. В этом уроке я использую удивительные изображения с dribbble, размещенные Troy Cummings:
<div id="portfolio"></div>
<ul id="portfolio-item">
<li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck"></li>
<li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo"></li>
<li><img src="images/dozer_teaser.jpeg" alt="Dozer"></li>
<!-- to n image -->
</ul>
У нас будут содержаться атрибуты подписи для изображений, следующий код это результат построения генерируемой разметки с помощью JavaScript:
<div id="portfolio">
<div style="background:url(images/dumptruck_teaser.jpeg)"> <span>Dump Truck</span></div>
<div style="background:url(images/rrwooo_rrwooo_teaser.jpeg)"> <span>Rrwooo</span></div>
<!-- to n div -->
</div>
С разметкой мы в небольшой мере, надеюсь, разобрались, переходим к следующему шагу.
Шаг 2. CSS
Изображения у нас будут выводится сеткой, нам необходимо задать общие параметры построения сетки добавить немного прозрачного диапазона черного фона, теней, Также мы установим display на none.
#portfolio-item {
display: none;
}
#portfolio {
margin: 2em 0 1em;
transform-style: preserve-3d;
}
#portfolio div {
display: inline-block;
position: relative;
vertical-align: top;
margin: 1em;
width: 200px;
height: 150px;
box-shadow: 0px 0px 25px rgba(0,0,0,.3);
}
#portfolio div span {
text-align: left;
position: absolute;
color: #fff;
background: rgba(0,0,0,0.6);
width: 90px;
padding: 5px 15px 7px;
z-index: 1;
left: -10px;
bottombottom: 10px;
}
Нам необходимо добавить класс анимации который будет использоваться при переходе на другую страничку. Мы будем вращать изображения на 360 градусов. относительно осей Х и Y.
.animated {
transition: .9s ease-out;
}
.flipped-horizontal-rightright {
transform: rotateY(360deg);
}
.flipped-horizontal-left {
transform: rotateY(-360deg);
}
.flipped-vertical-top {
transform: rotateX(360deg);
}
.flipped-vertical-bottombottom {
transform: rotateX(-360deg);
}
Шаг 3. JavaScript
Для начала нам необходимо определить некоторые переменные для навигации:
navigation.on('click', function(e) {
e.preventDefault();
navigation.removeClass('selected');
$(this).addClass('selected');
page = $(this).attr('data-page');
for( var i = 0; i <= indexedItemShow; i++ ) {
random = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
animation = rotation[random];
item = itemWrapper.children('div:eq(' + i + ')');
item.addClass('animated ' + animation);
}
});
При нажатии на пункты, будет происходить анимация и подбор изображений:
window.setTimeout(function (index) {
return function () {
indexReal = (page == 1) ? index : (index + (page - 1)) ;
itemHost = indexReal + (indexedItemShow * (page - 1));
itemImage = itemList.children('li:eq(' + itemHost + ')').children('img');
itemSrc = itemImage.attr('src');
itemAlt = itemImage.attr('alt');
itemCurrent = itemWrapper.children('div:eq(' + index + ')');
itemCurrent.css('background', 'url(' + itemSrc + ')');
itemCurrent.children('span').text(itemAlt);
};
} (i), 500);
Вот и все. Готово!
Материал взят из зарубежного источника - webstuffshare.com/2012/07/portfolio-flipping-slider-using-jquery-css3 и представлен исключительно в ознакомительных целях.
