24
мар
2016
Просматривая слайдер контента вы наверняка замечали навигацию в нем, которая позволяет осуществить быструю перемотку в нужное место. Зачастую эта навигация представлена в виде простых точек или обычных стрелок, что не дает посетителю представления о том, какой элемент будет следующим. Сегодня мы рассмотрим как добиться красивого эффекта при наведении на изображение в меню навигации, который будет реализован с помощью 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 пикселей, а мы, соответственно, установим отрицательные поля и закругленные углы на половину этого значения. Мы немного увеличим размер фонового изображения. Вдобавок, мы изменим цвет фона и уровень плотности отображения:
Мы также увеличим размер фона, и установим отрицательные поля, а также закругленные углы на половину значения ширины элемента:
Вот и все. Готово!
Слайдер с круглой навигацией с помощью 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>
<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;
}
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;
}
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: #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;
}
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;
}
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;
}
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}
Вот и все. Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): Alexand3r
В новости: Mr. Macagi - HTML5 Platform gameХоть игра простая и на Констракте, но всё равно спасибо. А свои, в смысле, те что есть у меня, как добавлять? Вроде раньше пробовал через "Добавить новость" отправлять скрипт, но видимо отклонили мой запрос. -
Написал(а): Ares
В новости: JShortcodes v4.3 - создание макетов сайтов с шорткодами для JoomlaЦитата: Wet10Ссылка не работает.
обновил -
Написал(а): Wet10
В новости: JShortcodes v4.3 - создание макетов сайтов с шорткодами для JoomlaСсылка не работает. -
Написал(а): Ares
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для JoomlaЦитата: dafaherссылка не работает
обновил -
Написал(а): dafaher
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для JoomlaДобрый день, в первую очередь спасибо, что поделились такими ценными расширениями. Я просто хотел сообщить вам, что ссылка не работает, спасибо большое. -
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work