Продолжаем рассматривать уроки по созданию меню для сайта, сегодня речь пойдет о плавной навигации с использованием «easing». Объясняем, что термин «easing» означает постепенное ускорение и замедление во время анимации, что позволяет ей выглядеть более реалистично. «Easing» создает более правдоподобный вид ускорения или замедления, путем постепенной подстройки скорости изменений. Выглядит достаточно оригинально, имеет гибкие настройки, давайте посмотрим что у нас с этого получилось..

 

Функцию «Easing» можно использовать во Flash, но что бы не прибегать к его применению, мы будем использовать jQuery, а именно плагин jQuery Easing, который обладает практически такими же возможностями:

Для начала подключаем скрипты, некоторые из них будут использоваться из библиотеки скриптов Google, так что правильно указывайте путь к скрипту:

Затем создаем html структуру нашего меню:

Теперь стилизация меню, здесь можно использовать различные варианты, от градиентной CSS заливки, до изображений .png, в уроке используем обычную цветовую гамму:

  Затем оживляем наше меню, с помощью jQuery, для этого нам необходимо создать файл и назвать его animated-menu.js:

Как видим выше, мы стали использовать функцию «Easing», суть в том, когда  пользователь наводит мышь на меню, его элементы начинают анимацию. «Easing» (подключается функцией ‘easeOutBounce’) заставляет меню немного попрыгать когда оно достигает конца анимации («out»).

На главную