Автор

Слайдер с круглой навигацией с помощью CSS3

Слайдер с круглой навигацией с помощью CSS3


 

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

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Слайдер с круглой навигацией с помощью CSS3

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


Слайдер с круглой навигацией с помощью CSS3

Создаем адаптивный слайдер товаров с помощью плагина анимации Sequence.js. В статье подробно описываются все нюансы инструмента и какие параметры используются в слайдере. Хороший вариант презентации своих продуктов.


Слайдер с круглой навигацией с помощью CSS3

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов. Одна из предшествующих версий этого плагина уже упоминалась в моем блоге и ранее, сейчас познакомимся с более свежим решением. Последняя версия выпущена совсем недавно: 24 января 2011 года.


Слайдер с круглой навигацией с помощью CSS3

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close