ПИКТОГРАММЫ С 3D-ЭФФЕКТОМ
Сегодня мы хотим показать вам, как создавать захватывающие 3D-эффекты при наведении с использованием CSS3 и JQuery.
В наших примерах мы будем использовать миниатюру, которая раскроет скрытую информацию при наведении курсора мыши. Мы создадим структуру с JQuery, что позволит сделать изображение сложенным или изогнутым, когда курсор мыши находится над ним. Для эффекта перекатывания мы будем использовать CSS 3D-преобразования.
ПОСМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСТОЧНИКА
Пожалуйста, обратите внимание: результат этого урока
будет работать только в браузерах, которые поддерживают соответствующие
свойства CSS.
Мы будем опускать префиксы в этом уроке. Но Вы,
конечно, сможете найти их в файлах.
РАЗМЕТКА
Разметка для миниатюр будет выглядеть следующим образом:
|
<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>
|
Каждая миниатюра переходит в подразделение с другим
подразделением для деталей (вид-назад). Структура, которую мы хотим
создать для каждого подразделения с классом Посмотреть с использованием
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 переходов:
|
.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;
}
|
Давайте создадим стили пролетов и ссылкок:
|
.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;
}
|
Для значка перед пролетом мы будем использовать значок
шрифта, который мы создали с Fontello . Так
как мы добавили данный значок в атрибут пролетов, мы можем использовать
псевдо-класс: прежде чем открыть ее:
|
.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;
}
|
Это позволит сдвинуть слайд-налево, когда мы наведем курсор.
Теперь давайте взглянем на пример!
Пример
В этом примере мы хотим создать складной эффект. Для
этого мы отрегулируем в перспективе значение отображаемого разделения и переход
для всех по разделам:
|
.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 градусов.Помните, что мы находимся в вложенной структуре. Как
только мы вращаем родителей, дети все будут поворачивать.
Чтобы выглядело более реалистично, мы добавим некоторые
градиенты:
|
.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%);
}
|
Часть миниатюр, с командой показал, когда мы наводим курсор,
также будет иметь градиент фона, так как мы хотим, имитировать тени падающие на
него:
|
.view div.view-back{
background: linear-gradient(left, #0a0a0a
0%,#666666 100%);
}
|
Есть много различных возможностей для эксперимента с
этим.
Надеюсь, вы найдете то что вас вдохновляет!
ПОСМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСТОЧНИКА
Ссылка
на источник
|
