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

В демонстрации мы отобразим миниатюры следующего и предыдущего изображений в слайдере. Эффект реализован посредством функции transitions в CSS3.

Шаг 1. HTML

Для начала нам необходимо создать разметку данной навигации с пузырьковым эффектом:

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

Шаг 2. CSS

Сейчас нам необходимо добавить стилизацию к навигации. Будем предполагать, что у нас будет относительный контейнер, элементу ссылки мы зададим позицию absolute. Значение высоты и ширины будет составлять 70 пикселей, так что у нас будет достаточно места для эффекта наведения:

Элемент span, который будет содержать стрелки в качестве фонового изображения, изначально будет иметь высоту и ширину в 46 пикселей. Для того чтобы воссоздать круг, нужно выставить параметр border-radius, значение которого будет составлять половину высоты/ширины. Посредством трюка с 50% отрицательного поля, мы сдвинем его в центре элемента ссылки. Далее мы определим переход, который возьмёт в учет все параметры и продлится 400мс:

Теперь фоновое изображение элемента span (правая и левая стрелки):

Фоновое изображение зальёт весь элемент, так как мы зададим параметру background-size значение ширины и высоты в 100%. Переход для данного элемента будет учитывать все параметры и продлится 200мс с функций ease-out:

Теперь давайте определим, как элементы будут выглядеть при наведении. Ширина и высота span будут увеличены до 100 пикселей, а мы, соответственно, установим отрицательные поля и закругленные углы на половину этого значения. Мы немного увеличим размер фонового изображения. Вдобавок, мы изменим цвет фона и уровень плотности отображения:

Мы также увеличим размер фона, и установим отрицательные поля, а также закругленные углы на половину значения ширины элемента:

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

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

Читайте также: