—»     —»   Эффект круговой навигации на CSS3
  Раздел: Меню и Навигация, CSS/Style Sheets   Комментариев: 4  

Эффект круговой навигации на CSS3



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

Эффект круговой навигации на CSS3

Изображения были предоставлены Андреем и Лили (Andrey & Lili); они распространяются под лицензионным соглашением CC BY-NC 3.0 License.

Верстка

Для реализации CSS3-эффекта у нас будет следующая структура навигации:

<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-код

Сейчас давайте посмотрим, как можно добавить стилизацию к навигации.
Предполагая, что у нас будет относительный контейнер, элементу ссылки мы зададим позицию 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;
}

Div с миниатюрой в качестве фонового изображения будет иметь значение высоты и ширины в 0 пикселей. Также мы зададим ему абсолютное позиционирование, что позволит нам расположить его в центре элемента ссылки. Border-radius и марины изначально будут иметь значение в 0. Фоновое изображение зальёт весь элемент, так как мы зададим параметру 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;
}

И, наконец, div-элемент для маленькой миниатюры будет расширен до 90 пикселей, так что мы все равно будем наблюдать элемент 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;
}

И на этом всё! Отличный эффект, реализованный лишь посредством CSS3! Познакомьтесь с демо, что позволит вам увидеть, как это выглядит будучи встроенным в слайдер с отображением предыдущей и следующей миниатюры (с поддержкой современных браузеров, за исключением IE9). Надеюсь, вам понравилось наше сегодняшнее небольшое руководство, и вы найдете применение данному эффекту.

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8070   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 февраля 2012 @ 22:28
Написал: aleks1309 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отличный эффект.если применить будет круто смотреться
Комментарий #2: 4 января 2013 @ 23:59
Написал: Виктор — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Да, слайдер классный! А на нем есть "autoplay"?
Комментарий #3: 8 января 2013 @ 13:15
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Виктор, по ходу нет ...
Комментарий #4: 13 февраля 2013 @ 20:46
Написал: devimovs — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
setInterval(function(){$(".cn-nav-next").click(); }, 3000);
добавить в конец файла jquery.slideshow.js
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930