В статье описано, как с использованием jQuery создать 3D эффекты CSS при наведении курсора.
Тут можно Посмотреть, а тут — Скачать
В примерах ниже используются миниатюры, которые при наведении курсора будут отображать определенную информацию CSS. Благодаря jQuery при наведении на изображения, они появляться в свернутом или согнутом виде. Для этих эффектов будет использоваться CSS 3D transforms.
Разметка в HTML
Такой будет разметка для уменьшенной структуры:
<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="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a> </div> <img src="images/1.jpg" /> </div> <div class="view"> <!-- ... --> </div> <!-- ... --> </div> Каждая миниатюра находится в контейнере. Нужно создать структуру для каждого раздела с контейнера view, используя JavaScript:
<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 --> У каждой части будет соответствующее изображение и поскольку есть вложенная структура, эффектом можно будет управлять. Кроме того, добавится наложение, которое придаст эффекту большей реалистичности.
Функция JavaScript будет выглядеть так:
$.fn.hoverfold = function( args ) { this.each( function() { $( this ).children( '.view' ).each( function() { var $item = $( this ), img = $item.children( 'img' ).attr( 'src' ), struct = '<div class="slice s1">'; struct +='<div class="slice s2">'; struct +='<div class="slice s3">'; struct +='<div class="slice s4">'; struct +='<div class="slice s5">'; 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 class="overlay" ></span>' ) ); } ); }); }; Теперь переходим к настройке общих стилей.
CSS
Определяем стиль для контейнера с миниатюрами и добавляем перспективу:
.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 transitions:
.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 в span, для вывода используем псевдо-класс :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); } Далее устанавливаем соответствующие позиции background для каждой части фонового изображения:
.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; } В overlays по умолчанию будет непрозрачность 0. Добавляем переход и меняем уровень непрозрачности CSS при наведении:
.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; } Это заставит изображение перемещаться влево при наведении курсора. Посмотрим на примере.
Пример
Для этого примера нужно создать эффект складывания изображения. Поэтому скорректируем значение перспективы и переходов для всех контейнеров:
.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); } Добавляем градиенты в overlays для большей реалистичности:
.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%); } В некоторых деталях миниатюры при наведении также будет присутсвовать фоновый градиент CSS (для моделирования тени от изображений):
.view div.view-back{ background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } Изображения предоставлены Angelo González, с соответствующей лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.
ссылка на оригинал статьи https://habrahabr.ru/post/281609/
Добавить комментарий