Интересный эффект для миниатюр c помощью CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D.

Шаг 1. HTML

Для начала мы рассмотрим разметку html, которая достаточно простая и имеет следующий вид.

</div>

</div>

Каждая миниатюра заключена в отдельный элемент div в который включен еще один элемент div для дополнительной информации (view-back). Структура, которая будет создаваться для каждого элемента div с классом view с помощью JavaScript:

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

$.fn.hoverfold = function( args ) {

this.each( function() {

$( this ).children( '.view' ).each( function() {

var $item = $( this ),

img = $item.children( 'img' ).attr( 'src' ),

struct = '<div>';

struct +='<div>';

struct +='</div>';

var $struct = $( struct );

$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );

} );

});

};

Теперь можно делать эффект для события. Для начала определим общие стили и затем сформируем первую демонстрацию.

Шаг 2. CSS

Определим стили для элемента div view. Здесь добавляется перспектива:

.view {

width: 316px;

height: 216px;

margin: 10px;

float: left;

position: relative;

border: 8px solid #fff;

box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

background: #333;

perspective: 500px;

}

Для слоев нужно добавить несколько свойств 3D и переход:

.view .slice{

width: 60px;

height: 100%;

z-index: 100;

transform-style: preserve-3d;

transform-origin: left center;

transition: transform 150ms ease-in-out;

}

Часть описания, которая показывается при сдвиге слоя, будет иметь следующие стили:

.view div.view-back{

width: 50%;

height: 100%;

position: absolute;

right: 0;

background: #666;

z-index: 0;

}

Теперь зададим стили для элементов span и ссылок:

.view-back span {

display: block;

float: right;

padding: 5px 20px 5px;

width: 100%;

text-align: right;

font-size: 16px;

color: rgba(255,255,255,0.6);

}

.view-back span:first-child {

padding-top: 20px;

}

.view-back a {

display: bock;

font-size: 18px;

color: rgba(255,255,255,0.4);

position: absolute;

right: 15px;

bottom: 15px;

border: 2px solid rgba(255,255,255,0.3);

border-radius: 50%;

width: 30px;

height: 30px;

line-height: 22px;

text-align: center;

font-weight: 700;

}

.view-back a:hover {

color: #fff;

border-color: #fff;

}

Для иконок перед элементом span будем использовать специальный шрифт, который создан с помощью сервиса Fontello. Так как мы добавляем атрибут data-icon к элементу, то будем использовать псевдо-класс :before для вывода:

.view-back span[data-icon]:before {

content: attr(data-icon);

font-family: 'icons';

color: #aaa;

color: rgba(255,255,255,0.2);

text-shadow: 0 0 1px rgba(255,255,255,0.2);

padding-right: 5px;

}

Все слои, кроме первого, нужно сдвигать вправо:

.view .s2,

.view .s3,

.view .s4,

.view .s5 {

transform: translateX(60px);

}

Установим соответствующее положение фона для каждого слоя:

.view .s1 {

background-position: 0px 0px;

}

.view .s2 {

background-position: -60px 0px;

}

.view .s3 {

background-position: -120px 0px;

}

.view .s4 {

background-position: -180px 0px;

}

.view .s5 {

background-position: -240px 0px;

}

Перекрывающие слои изначально будут иметь непрозрачность 0, а затем мы сделаем переход и изменение уровня непрозрачности при наведении курсора мыши:

.view .overlay {

width: 60px;

height: 100%;

opacity: 0;

position: absolute;

transition: opacity 150ms ease-in-out;

}

.view:hover .overlay {

opacity: 1;

}

Зафиксируем положение и значение свойства z-index для изображений (для того, чтобы скрыть заднюю часть). Также добавим переходы для тех браузеров, которые не поддерживают 3D трансформации:

.view img {

position: absolute;

z-index: 0;

transition: left 0.3s ease-in-out;

}

Для случаев, когда браузер не поддерживает замечательные свойства 3D, будем загружать дополнительную таблицу стилей fallback.css, которая содержится следующий код:

.view {

overflow: hidden;

}

.view:hover img {

left: -85px;

}

.view div.view-back {

background: #666;

}

Слои будут смещаться влево при наведении курсора мыши.

Для данного примера мы сделаем эффект складывания изображения. Для решения задачи установим значение свойства perspective для элемента span view и переходы для остальных элементов.

.view {

perspective: 1050px;

}

.view div {

transition: all 0.3s ease-in-out;

}

Второй, третий, четвертый и пятый слои будут переводиться и вращаться в 3D, создавая эффект складывания:

.view:hover .s2{

transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);

}

.view:hover .s3,

.view:hover .s5{

transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);

}

.view:hover .s4{

transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);

}

Каждый из слоев будет смещаться влево. Так как мы хотим исключить пробелы между слоями, то установим ширину 59px. Второй слой будет поворачиваться на -45 градусов. Четвертый слайд вращается в другую сторону. А третий и пятый слои поворачиваются на 90 градусов.