Интересный эффект для миниатюр на CSS3
Пожалуй, на каждом сайте можно встретить миниатюры, которые содержат лишь малую часть информации которая необходима пользователю, зачастую такие превью изображений достаточно скучны, и не совсем привлекают пользователей, они сливаются с общей картиной сайта, и теряют свою способность притягивать взор посетителя к необходимой информации. Но как решить данную проблему, и создать такие миниатюры, чтобы привлекали и завораживали взор посетителей. В данном уроке мы рассмотрим как создать интересный эффект для класса hover.
В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D.
Шаг 1. HTML
Для начала мы рассмотрим разметку html, которая достаточно простая и имеет следующий вид.
1 2 3 4 5 6 7 8 9 10 |
<div id="grid" class="main"> <div class="view"> <div class="view-back"> <span data-icon="A">566</span> <span data-icon="B">124</span> <a href="#">→</a> </div> <img src="images/1.jpg" /> </div> </div> |
Каждая миниатюра заключена в отдельный элемент div
в который включен еще один элемент div
для дополнительной информации (view-back). Структура, которая будет создаваться для каждого элемента div
с классом view с помощью JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="view"> <div class="view-back"> <!-- ... --> </div> <div class="slice s1" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s2" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s3" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s4" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s5" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> </div><!-- /s5 --> </div><!-- /s4 --> </div><!-- /s3 --> </div><!-- /s2 --> </div><!-- /s1 --> </div><!-- /view --> |
Каждый слой имеет соответствующее изображение в качестве фона. Так как у нас получается вложенная структура, то можно контролировать эффект. Дополнительно используется покрывающий элемент span
, который помогает придать реалистичности эффекту.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$.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>'; struct +='<div>'; struct +='<div>'; struct +='</div>'; struct +='</div>'; 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. Здесь добавляется перспектива:
1 2 3 4 5 6 7 8 9 10 11 |
.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 и переход:
1 2 3 4 5 6 7 8 9 |
.view .slice{ width: 60px; height: 100%; z-index: 100; transform-style: preserve-3d; transform-origin: left center; transition: transform 150ms ease-in-out; } |
Часть описания, которая показывается при сдвиге слоя, будет иметь следующие стили:
1 2 3 4 5 6 7 8 |
.view div.view-back{ width: 50%; height: 100%; position: absolute; right: 0; background: #666; z-index: 0; } |
Теперь зададим стили для элементов span
и ссылок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.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 для вывода:
1 2 3 4 5 6 7 8 |
.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; } |
Все слои, кроме первого, нужно сдвигать вправо:
1 2 3 4 5 6 |
.view .s2, .view .s3, .view .s4, .view .s5 { transform: translateX(60px); } |
Установим соответствующее положение фона для каждого слоя:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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, а затем мы сделаем переход и изменение уровня непрозрачности при наведении курсора мыши:
1 2 3 4 5 6 7 8 9 10 11 |
.view .overlay { width: 60px; height: 100%; opacity: 0; position: absolute; transition: opacity 150ms ease-in-out; } .view:hover .overlay { opacity: 1; } |
Зафиксируем положение и значение свойства z-index для изображений (для того, чтобы скрыть заднюю часть). Также добавим переходы для тех браузеров, которые не поддерживают 3D трансформации:
1 2 3 4 5 |
.view img { position: absolute; z-index: 0; transition: left 0.3s ease-in-out; } |
Для случаев, когда браузер не поддерживает замечательные свойства 3D, будем загружать дополнительную таблицу стилей fallback.css, которая содержится следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
.view { overflow: hidden; } .view:hover img { left: -85px; } .view div.view-back { background: #666; } |
Слои будут смещаться влево при наведении курсора мыши.
Для данного примера мы сделаем эффект складывания изображения. Для решения задачи установим значение свойства perspective для элемента span
view и переходы для остальных элементов.
1 2 3 4 5 6 7 |
.view { perspective: 1050px; } .view div { transition: all 0.3s ease-in-out; } |
Второй, третий, четвертый и пятый слои будут переводиться и вращаться в 3D, создавая эффект складывания:
1 2 3 4 5 6 7 8 9 10 |
.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 градусов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.view .s2 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } .view .s3 > .overlay { background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } .view .s4 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); } .view .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } |
Для той части миниатюры, которая открывается при наведении курсора мыши, также установим градиент для фона, чтобы имитировать тень:
1 2 3 |
.view div.view-back{ background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } |
В демонстрации приведены также другие эффекты, код для которых можно посмотреть в исходниках.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 20.06.2012 в 15:19, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |