В этом уроке я покажу Вам, как сделать анимированную панель навигации на Ваш сайт. Эта панель будет выдвигаться при наведении указателя мыши на небольшую видимую часть при этом меняя свой фоновый цвет, и задвигаться обратно, когда Вы убираете с нее указатель мыши. Причем задвигаться она будет с анимированным эффектом «отскакивания». А самое главное – Вы узнаете о плагинах, при помощи которых сделать такую панель очень просто.
В одном из своих уроков я уже показывала, как сделать интерактивную выдвижную панель (Интерактивная выдвижная панель на сайт). Там мы создавали панель для авторизации пользователя, которая появлялась, когда мы щелкали по ее видимой части мышью.
Сегодня же, я покажу Вам как сделать другую панель с более сложной и интересной анимацией. А еще Вы узнаете о двух плагинах jQuery, которые позволят создать эту анимацию с легкостью. Я думаю, что Вы найдете применение такой анимированной панели на страницах Вашего сайта или блога.
Посмотреть пример в действии Вы можете, нажав на иконку «Демо» в самом начале урока, а скачать все исходные файлы Вы сможете, нажав на иконку «Исходники».
Ну а теперь давайте начнем!
Анимированная панель навигации на сайт
1. Для начала я создам простую html-страницу. К этой странице между тегами head мы подключим файл таблицы стилей «animate_style.css», который создадим чуть позже. Сам же html-файл я сохраню под именем «animate.html».
В этой странице будет заголовок, блок div с нашей навигационной панелью. В примере я использую в качестве ссылок для моей панели изображения. Я заранее подготовила их в программе Photoshop. Изображения должны быть одинакового размера (в моем примере они 70 на 70 px). Вы можете найти их в исходным материалах в папке «image» или же подготовить и использовать свои изображения, также поместив их в папку с именем «image».
Также на странице будет блок для основного контента и блок с футером.
Код страницы достаточно простой, я думаю, Вам не составит труда в нем разобраться. Ниже он приведен с комментариями:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Animate nav</title> <link rel="stylesheet" href="animate_style.css"> </head> <body> <div class="wrapper"> <div class="header"><!--заголовок страницы--> <p class="logo">WebSite-Create.ru</p> </div> <div id="dashboard"><!--блок для выдвижной анимационной панели--> <a href="#"><img src="image/1.jpg" alt="one"></a> <a href="#"><img src="image/2.jpg" alt="two"></a> <a href="#"><img src="image/3.jpg" alt="three"></a> <a href="#"><img src="image/4.jpg" alt="four"></a> <a href="#"><img src="image/5.jpg" alt="five"></a> <a href="#"><img src="image/6.jpg" alt="six"></a> </div> <div class="content"><!--основной контент страницы--> <div class="main"> <h1>Анимационная панель навигации</h1> <p>Наведите указатель мыши на полосу у левого края страницы</p> </div> </div> <div class="footer"><!--футер--> <p><a href="http://website-create.ru">WebSite-Create.ru - </a>Авторский Блог Анны Котельниковой</p> </div> </div> </body> </html>
Если мы посмотрим нашу страницу в браузере, то на данном этапе она будет выглядеть вот так:
2. Давайте теперь создадим файл таблицы стилей с именем «animate_style.css», разместим его в том же каталоге, что и html-файл (если Вы будете размещать файл таблицы стилей в отдельной папке, то не забудьте исправить путь к нему в html-файле).
И сейчас пропишем некоторые стили для нашей веб-страницы, чтобы она выглядела посимпатичнее, и чтобы подготовить нашу выдвижную панель к анимации.
В приведенном ниже коде стилей для элементов страницы Вы можете увидеть правила расстановки элементов и придания им определенных стилей. Также я украсила надписи и некоторые блоки тенями.
Но самое большое Ваше внимание обратите на стили для элемента с идентификатором «dashboard», потому как именно эти стили прячут нашу панель с картинками, оставляя только ее край в поле нашей видимости.
Итак, код для файла таблицы стилей:
html, body{
margin:0;
padding:0;
line-height:1;
background-color:#009595;}
.header {
position: relative;
border-top: solid 6px white;
padding: 10px 0 10px 0;
margin-bottom: 20px;
box-shadow:#666 2px 2px 2px;}
.header p{
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
color:#ea7500;
font-weight:600;
text-shadow:#333 3px 3px 2px;
padding-left:10px;}
#dashboard {
width: 70px;
background-color: rgba(191,96,0,.75);
padding: 20px 20px 0 20px;
position: absolute;
left: -92px;
z-index: 100;
box-shadow:#666 2px 2px 2px;}
#dashboard img {
margin-bottom: 20px;
border: 1px solid rgb(0,0,0);}
.content, .footer{text-align:center;}
h1{
font-family:Verdana, Geneva, sans-serif;
font-style:italic;
color:#d5ffff;
text-shadow:#6affff 0 0 7px;}
.main p{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#FFF;}
.footer{
position:fixed;
bottom:0px;
left:100px;
width:100%;
background-color:#005555;}
.footer p{
padding:4px;
margin:0;
font-family:Verdana, Geneva, sans-serif;
color:#fff;}
.footer a{color:#ff8000; font-weight:600;}
Если мы сейчас откроем нашу страницу в браузере, то увидим, что стили применились, панель с изображениями спрятана, и мы видим только ее край.
Приготовления окончены. Приступаем к программированию.
3. Почти все готово для написания кода, чтобы анимировать нашу спрятанную навигационную панель. Но нужно еще кое-что прописать в html-файле, а именно, подключить к нему библиотеку jQuery и два ее плагина, которые позволят нам создать анимацию с легкостью. Также мы должны будем создать и подключить JavaScript файл, в котором будем писать наш код.
Но давайте все по порядку.
Первым делом подключим библиотеку jQuery и плагины. Эти файлы Вы можете найти в исходниках к уроку в папке «js». Создайте также и у себя в каталоге, где лежит html-файл папку «js» и скопируйте в нее файлы: «jquery-1.6.3.min.js», «jquery.easing.1.3.js» и «jquery.color.js».
Теперь между тегами head в html-файле, сразу после подключения таблицы стилей подключите три этих файла:
<script src="js/jquery-1.6.3.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.color.js"></script>
А теперь нужно создать JavaScript-файл, в котором уже мы сами будем писать наш код. Создайте JavaScript-файл и назовите его «animate.js». Сохраните этот файл также в папку «js».
И сейчас, сразу после подключения трех файлов (с библиотекой и плагинами), подключите к html-странице и этот файл.
<script type="text/javascript" src="js/animate.js"></script>
4. Перейдем в файл «animate.js» и начнем писать наш код.
Начнем мы написание нашего кода со следующих строк:
$(document).ready(function(){
});
Эта функция подождет, пока загрузится весь html-код, а после этого начнет выполнять код JavaScript, который мы будем прописывать между фигурными скобками.
Теперь нам нужно выбрать элемент, который отвечает за выдвижную панель. Этот элемент имеет идентификатор «dashboard». На элемент мы вешаем функцию «hover()», которая принимает в качестве параметров две анонимные функции. Одна из них будет отвечать за действия, когда мы наводим указатель мыши на край панели; другая – за действия, когда мы этот указатель убираем.
$(document).ready(function(){
$('#dashboard').hover(
function(){
},
function(){
}
);//окончание функции hover()
});//окончание функции ready()
Пока что функция ничего не делает, так ее параметры (анонимные функции) не содержат каких-либо команд – они пустые. Давайте это исправим.
Сначала пропишем действия для ситуации, когда курсор мыши наведен на навигационную панель. Мы будем использовать функцию «animate()» вместе с указателем «this» («this» относится к элементу страницы, к которому прикреплено событие – в данном случае к блоку с навигационной панелью).
В функцию мы передадим три аргумента: первый – объектная константа, которая позволит изменить расположение блока относительно левого края (а попросту, выдвинет панель) и поменять цвет самой панели (это становится возможным при помощи подключенного ранее плагина); второй – установит длительность анимации (500 миллисекунд); третий – установит тип анимации «easeInSine» (использование этой анимации возможно благодаря подключенному плагину).
$(document).ready(function(){
$('#dashboard').hover(
function(){
$(this).animate(
{
left:'0',
backgroundColor:'rgb(255,234,213)'
},
500,
'easeInSine'
);//окончание функции animate()
},
function(){
}
);//окончание функции hover()
});//окончание функции ready()
Если сейчас обновить страницу в браузере и навести указатель мыши на край панели, то можно увидеть, как она плавно выдвигается, меняя свой цвет.
Уже хорошо! Но нужно, чтобы панель еще и задвигалась, когда мы уводим с нее курсор мыши. Для этого нам нужно прописать команды для второй анонимной функции.
Подобно тому как мы прописывали код для выдвижения панели, мы пропишем код для того, чтобы она задвинулась обратно, но только здесь мы применим эффект «отскакивания» (как будто при задвижении навигационная панель ударяется о край, отскакивает и только потом полностью задвигается), увеличим время анимации и вернем цвет и расположение панели в исходное состояние.
$(document).ready(function(){
$('#dashboard').hover(
function(){
$(this).animate(
{
left:'0',
backgroundColor:'rgb(255,234,213)'
},
500,
'easeInSine'
);//окончание функции animate()
},
function(){
$(this).animate(
{
left: '-92px',
backgroundColor: 'rgba(191,96,0,0.75)'
},
1500,
'easeOutBounce'
);//окончание функции animate()
}
);//окончание функции hover()
});//окончание функции ready()
Теперь все очень здорово работает. Можете проверить страницу в браузере. Осталась одна небольшая проблема: если Вы начнете быстро водить мышкой туда-сюда, наводя и уводя ее с панели, то потом, остановившись, можете обнаружить, что еще какое-то время панель будет выдвигаться и задвигаться уже без ваших действий. Это происходит от того, что анимационный эффект ставится в очередь и при многократном наведении указателя мыши создает длинный список эффектов.
Чтобы исправить эту ситуацию, нужно между «this» и «animate» прописать функцию «stop()». Это решит проблему.
Таким образом финальная версия кода будет выглядеть следующим образом:
$(document).ready(function(){
$('#dashboard').hover(
function(){
$(this).stop().animate(
{
left:'0',
backgroundColor:'rgb(255,234,213)'
},
500,
'easeInSine'
);//окончание функции animate()
},
function(){
$(this).stop().animate(
{
left: '-92px',
backgroundColor: 'rgba(191,96,0,0.75)'
},
1500,
'easeOutBounce'
);//окончание функции animate()
}
);//окончание функции hover()
});//окончание функции ready()
Вот так, всего 24 строчки кода (будет меньше, если не писать каждые кавычки с новой строки) и у Вас эффектная анимированная панель.
Я думаю, Вы обязательно найдете применение такой панели у себя на сайте.
А я на этой ноте буду с Вами прощаться. Я надеюсь, что урок был Вам интересен и полезен. Если остались какие-то вопросы, пишите в комментариях, я Вам обязательно отвечу. Ваши мнения и пожелания можете оставлять там же. Буду признательна.
Делитесь уроком с друзьями. Для этого ниже есть кнопки социальных сетей. И подписывайтесь на обновления блога (если Вы на них еще не подписаны).
Ну вот, наверное, и все. Успехов Вам друзья и побольше креативных идей!
До связи.
