Сегодня мы рассмотрим вариант создания красивого эффекта при наведении мышкой на элемент цикличной навигации. Реализуем мы его, используя CSS3 transitions.
Итак, задача наша в том, чтобы создать цикличную навигацию карусельного типа, добавить круглые кнопки со стрелками, перерастающие при наведении мышки в такие же круглые превью следующей страницы. В рассматриваемом примере это будут превью предыдущего и последующего изображения.

В демо-примере были использованы фотографии Андрея Яковлева

HTML

Наша навигация будет выглядеть следующим образом:
<blockquote>
01 <div class="cn-nav">
02 <a href="#" class="cn-nav-prev">
03 <span>Previous</span>
04 <div style="background-image:url(../images/thumbs/1.jpg);"></div>
05 </a>
06 <a href="#" class="cn-nav-next">
07 <span>Next</span>
08 <div style="background-image:url(../images/thumbs/3.jpg);"></div>
09 </a>
10 </div>
</blockquote>

В демо-примере работает шаблон jQuery, который динамически добавляет превью для предыдущего и последующего изображения демонстрационной ленты. Однако здесь и сейчас мы рассмотрим только сам момент создания эффекта расширяющегося кружка.

CSS

Давайте рассмотрим, как мы добавляем стили для создания такой навигации.
Исходя из того, что будет окружать навигационные элементы, мы зададим последним абсолютное положение. Высота и ширина у нас будет 70px, ни много, ни мало, а в самый раз для красивого hover-эффекта.

01 .cn-nav > a{
02 position: absolute;
03 top: 0px;
04 height: 70px;
05 width: 70px;
06 }
07 a.cn-nav-prev{
08 left: 0px;
09 }
10 a.cn-nav-next{
11 right: 0px;
12 }

Изображения стрелочек мы помещаем фоном в span-элемент с изначальной высотой и шириной в 46px. Чтобы он приобрел круглую форму, устанавливаем радиус границы равным половине его размеров. Дальше, с помощью отрицательного 50%-ного отступа мы помещаем его в центр ссылки. И затем назначаем анимированный переход, изменяющий нужные нам свойства в течение 400ms, с дефолтным значением ease.

01 .cn-nav a span{
02 width: 46px;
03 height: 46px;
04 display: block;
05 text-indent: -9000px;
06 -moz-border-radius: 23px;
07 -webkit-border-radius: 23px;
08 border-radius: 23px;
09 cursor: pointer;
10 opacity: 0.9;
11 position: absolute;
12 top: 50%;
13 left: 50%;
14 background-size: 17px 25px;
15 margin: -23px 0 0 -23px;
16 -webkit-transition: all 0.4s ease;
17 -moz-transition: all 0.4s ease;
18 -o-transition: all 0.4s ease;
19 -ms-transition: all 0.4s ease;
20 transition: all 0.4s ease;
21 }

Фон span-элемента (стрелочки вправо-влево):

1 .cn-nav a.cn-nav-prev span{
2 background: #666 url(../images/prev.png) no-repeat center center;
3 }
4 .cn-nav a.cn-nav-next span{
5 background: #666 url(../images/next.png) no-repeat center center;
6 }

Теперь об элементе div, в котором содержится наше превью. Изначально он имеет нулевые размеры по высоте и ширине. Его положение тоже абсолютно и позиционированно в центре ссылки. Ширина границы и отступы также изначально нулевые. Фоновое изображение заполнит элемент до конца, следовательно мы задаем фону 100% по ширине и высоте. Анимированный переход этого элемента будет происходить для всех его свойств в течение 200ms, замедляясь по мере выполнения.

01 .cn-nav a div{
02 width: 0px;
03 height: 0px;
04 position: absolute;
05 top: 50%;
06 left: 50%;
07 overflow: hidden;
08 background-size: 100% 100%;
09 background-position: center center;
10 background-repeat: no-repeat;
11 margin: 0px;
12 -moz-border-radius: 0px;
13 -webkit-border-radius: 0px;
14 border-radius: 0px;
15 -webkit-transition: all 0.2s ease-out;
16 -moz-transition: all 0.2s ease-out;
17 -o-transition: all 0.2s ease-out;
18 -ms-transition: all 0.2s ease-out;
19 transition: all 0.2s ease-out;
20 }

А сейчас зададим вид объектов при наведении на них мышкой.

Наш span мы увеличим на 100px в ширину и высоту, и исходя из этого нам надо задать новый радиус границы в половину нового размера и отрицательные отступы. Еще немного увеличим размер фона, а также откорректируем его цвет и прозрачность.

01 .cn-nav a:hover span{
02 width: 100px;
03 height: 100px;
04 -moz-border-radius: 50px;
05 -webkit-border-radius: 50px;
06 border-radius: 50px;
07 opacity: 0.6;
08 margin: -50px 0 0 -50px;
09 background-size: 22px 32px;
10 background-color:#a8872d;
11 }

Наконец, наш div с превью увеличится лишь на 90px, так что из-под него будет выглядывать span, формируя рамку вокруг изображения. Точно так же, мы увеличиваем размер фона и установим отрицательные отступы и радиус границы в половину размера элемента:

1 .cn-nav a:hover div{
2 width: 90px;
3 height: 90px;
4 background-size: 120% 120%;
5 margin: -45px 0 0 -45px;
6 -moz-border-radius: 45px;
7 -webkit-border-radius: 45px;
8 border-radius: 45px;
9 }

Вот и все, собственно. Эффект работает на чистом CSS3. Загляните в демо от Мэри Лу с tympanus.net и оцените, как выглядит такая навигация, будучи встроенной в карусельную навигацию. Не забудьте, что нужно использовать последнюю версию браузера — любого, на сегодня.

Надеемся, эта информация пригодится вам в работе. Ваша Дежурка.



Коментарии запрещены.