Сегодня мы хотим показать вам, как создавать впечатляющие 3D эффекты при наведении курсора мыши с использованием CSS3 и jQuery. Эта идея навеяна классными hover-эффектами, которые можно найти на странице Google SketchUp Showcase.
В наших примерах мы будем использовать миниатюры, которые раскроют больше информации при наведении на них курсора мыши. Мы создадим макет при помощи jQuery, что позволит нам складывать или сгибать изображение, когда мы наводим на него курсор мыши. Для создания эффектов мы будем использовать CSS 3D трансформацию.
Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.
Изображения, используемые в демо-примерах, от Angelo González, используются они под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0).
Мы будем опускать префиксы браузеров для свойств CSS в статье, но вы, конечно, можете найти их в исходных файлах.
Разметка для миниатюр будет выглядеть следующим образом:
(0)
<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 -->
Каждая миниатюра располагается в блоке (класс view) с еще одним блоком для дополнительной информации (класс view-back). Структура, которую мы хотим создать для каждого блока с классом 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 -->
Каждая часть будет иметь соответствующее изображение, вставленное как фоновое изображение, и так как мы имеем вложенную структуру, это позволит нам контролировать эффект. Кроме того, мы добавим span с классом overlay, который мы будем использовать, чтобы сделать эффект более реалистичным.
Наша 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. Самое важное здесь то, что мы добавляем перспективу (perspective: 500px;):
.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-свойства и переходы (transition):
.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;
}
Для иконок мы будем использовать шрифт, который мы создали при помощи 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);
}
Давайте установим соответствующие позиции фона каждого кусочка для фонового изображения:
.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;
}
Изменим position и z-index для изображения, а также добавим transition для браузеров, которые не поддерживают 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 в блоке 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);
}
Каждый из этих кусочков будет перемещен в левую сторону. Вторая часть будет поворачиваться на -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%);
}
И вот и всё! Обратите также внимание и на другие примеры! Есть много различных возможностей для экспериментов с ними.
Надеюсь, вам понравилось!
© 2008 - 2024 Все права защищены
Новый комментарий