Просматривая слайдер контента вы наверняка замечали навигацию в нем, которая позволяет осуществить быструю перемотку в нужное место. Зачастую эта навигация представлена в виде простых точек, или обычных стрелок, что не дает посетителю представления о том, какой элемент будет следующим. Сегодня мы рассмотрим как добиться красивого эффекта при наведении на изображение в меню навигации, который будет реализован с помощью CSS3. Идея заключается в раскрытии круговой навигации со стрелкой, а также пузырика с миниатюрой.
В демонстрации мы отобразим миниатюры следующего и предыдущего изображений в слайдере. Эффект реализован посредством функции transitions в CSS3.
Шаг 1. HTML
Для начала нам необходимо создать разметку данной навигации с пузырьковым эффектом:
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Предыдущее</span>
<div style="background-image:url(../images/thumbs/1.jpg);"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Следующее</span>
<div style="background-image:url(../images/thumbs/3.jpg);"></div>
</a>
</div>
В демонстрации мы создадим шаблон jQuery и динамически добавим в него миниатюры для следующего и предыдущего изображений в слайдере. Но для того чтобы показать, как реализован эффект разворачивания круга, нам нужно показать вам следующую часть.
Шаг 2. CSS
Сейчас нам необходимо добавить стилизацию к навигации. Будем предполагать, что у нас будет относительный контейнер, элементу ссылки мы зададим позицию absolute. Значение высоты и ширины будет составлять 70 пикселей, так что у нас будет достаточно места для эффекта наведения:
.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 пикселей. Для того чтобы воссоздать круг, нужно выставить параметр border-radius, значение которого будет составлять половину высоты/ширины. Посредством трюка с 50% отрицательного поля, мы сдвинем его в центре элемента ссылки. Далее мы определим переход, который возьмёт в учет все параметры и продлится 400мс:
.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;
}
Фоновое изображение зальёт весь элемент, так как мы зададим параметру background-size значение ширины и высоты в 100%. Переход для данного элемента будет учитывать все параметры и продлится 200мс с функций 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 будут увеличены до 100 пикселей, а мы, соответственно, установим отрицательные поля и закругленные углы на половину этого значения. Мы немного увеличим размер фонового изображения. Вдобавок, мы изменим цвет фона и уровень плотности отображения:
.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;
}
Мы также увеличим размер фона, и установим отрицательные поля, а также закругленные углы на половину значения ширины элемента:
.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;
}
Вот и все. Готово!
Материал взят из зарубежного источника - http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/ и представлен исключительно в ознакомительных целях.