Эффект всплывающей миниатюры для навигации
Сегодня будем
создавать красивый эффект всплывающих миниатюр для навигации слайдов. В нашем примере мы будем показывать миниатюры
на следующие и предыдущие изображение слайдера при наведении на него стрелки мыши. Осуществляется
это с помощью CSS3 трансформаций.
СМОТРЕТЬ
DEMO СКАЧАТЬ ИСХОДНИК
HTML:
Для реализации
нашего эффекта будет использоваться следующая структура кода HTML:
|
<div
class="cn-nav">
<a href="#"
class="cn-nav-prev">
<span>Previous</span>
<div
style="background-image:url(../images/thumbs/1.jpg);"></div>
</a>
<a href="#"
class="cn-nav-next">
<span>Next</span>
<div
style="background-image:url(../images/thumbs/3.jpg);"></div>
</a>
</div>
|
В демонстрации
используется шаблон jQuery
и миниатюры предыдущего и следующего изображений добавляются динамически.
Данный код показан для объяснения сущности
эффекта.
CSS
Предположим, что у
нас есть внешний контейнер с относительным позиционированием. Устанавливаем для
элементов навигации абсолютное позиционирование и высоты и ширину равную 70px,
чтобы было пространство для восприятия движений курсора мыши:
|
.cn-nav >
a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;
}
|
Элемент span, который содержит стрелки в качестве
фоновых изображений, будет иметь высоту и ширину 46 px. Чтобы он выглядел круглым установим радиус границы равным половине
ширины/высоты. С помощью трюка 50% и отрицательного значения поля центрируем
элемент ссылки. Затем определяется трансформация для всех свойств с
длительностью 400ms
и эффектом перехода ease:
|
.cn-nav a
span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s
ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all
0.4s ease;
}
|
Фоновые изображения элемента span:
|
.cn-nav
a.cn-nav-prev span{
background: #666 url(../images/prev.png)
no-repeat center center;
}
.cn-nav
a.cn-nav-next span{
background: #666 url(../images/next.png)
no-repeat center center;
}
|
Элемент div для миниатюр (они являются фоновыми
изображениями) изначально имеет высоту и ширину 0px. Он будет абсолютно позиционироваться в
центре элемента ссылки. Радиус границы и поля также имеют значения 0
изначально. Фоновое изображение заполняет элемент, поэтому мы устанавливаем
размер для фона 100%. Трансформация для данного элемента будет выполняться для
всех свойств в течении 200ms с использованием эффекта перехода ease-out:
|
.cn-nav a
div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s
ease-out;
-o-transition: all 0.2s
ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
|
Теперь определим,
как будет выглядеть элемент при наведении курсора мыши.
Элемент span увеличит ширину и высоту до 100px. Мы установим отрицательное значение поля и
сделаем радиус границы равным половине ширины. Также немного увеличим размер
фонового изображения. В дополнение изменим цвет фона и прозрачность:
|
.cn-nav
a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;
}
|
В завершении
маленький элемент div
для миниатюр увеличится до 90px, так что все еще будет видно элемент span вокруг в качестве рамки миниатюры. Также
немного увеличим размер фона и установим отрицательные значения полей и радиус
границы равный половине ширины:
|
.cn-nav
a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}
|
На этом все.
Надеюсь вам понравилось.
СМОТРЕТЬ
DEMO СКАЧАТЬ ИСХОДНИК
Источник
| 
