Если на Вашем сайте нет слайдера или все элементы Вашего сайта статичны, то по нынешним модным тенденциям сайтостроения Вы — лузер и Ваш сайт теряет посетителей.

Если элементы сайта анимированы при помощи flash, то Ваш дизайнер Вас «кинул», Вы — лузер и Ваш сайт теряет посетителей (flash научились «вырезать» даже 80-летние старики).

Если Вы хотите быть привлекательным — элементы сайта необходимо «оживить» = анимировать при наведении при помощи JavaScript-фреймворков (jquery, mootools, и т.п.)

И не надо мне говорить про уникальность контента. В мире Интернета и «говносайтов» всегда надо помнить о том, как ты выглядишь и быть «на уровне». Зритель пошел избалованный и без внешних спецэффектов его удержать невозможно — всегда найдется некто более привлекательный, тупо «стыривший» Ваш бесценный контент, и загребет посетителя себе.

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

Для этого мы воспользуемся jquery и css.

В дизайне моего сайта кнопки статичны, однако сам дизайн содержит достаточно анимационных элементов, чтобы претендовать на «современность».

Демо урокаСкачать урок


Урок базируется на уроке Евгения Кириленко. Евгений подробнейше расписал и как рисовать кнопку, и как добавить ей hover-эффект.

Однако, моя модификация урока состоит в том, что надпись на кнопке — текст, в связи с чем :

  • кнопка становится аутентичной правилам SEO;
  • фон кнопки становится многоразовым к использованию, а текст может меняться в зависимости от потребностей;
  • повышается уровень «доверия» сайта в глазах посетителей и поисковых систем;
  • улучшается юзабилити.

В дизайне моего сайта текст кнопки «вшит» в саму кнопку. Однако, таких кнопок всего 2 на весь сайт. Надо будет больше — дорисую или нарисую совсем новые. В этом мире все относительно — делайте как Вам удобно.

В демо-скрипте я использую id элемента, поскольку кнопок на странице больше одной, я не использую в скрипте цикл, поскольку прямое перечисление работает быстрее.

Если у Вас на странице всегда только одна кнопка — можете использовать класс, и тогда в скрипте надо заменить div#id_элемента на div.class_элемента.

Данный прием анимации работает во всех браузерах, кроме IE6, хотя сама кнопка функциональна.

В IE6 вообще мало что работает, потому максимально отказывайтесь от поддержки этого убогого продукта.
Также проблемы возникают в IE7 и IE8 при использовании кнопки в формате png. Потому этот эффект сохраняет кроссбраузерность только для кнопок формата gif или jpg.

p.s. : За кнопки огромное спасибо psdGraphics.

 


 

2 комментария : “jQuery: анимационная кнопка без флеш”

  1. Thanks for finally writing about > jQuery | jQuery: анимационная кнопка без флеш | JEGee < Loved it!

    Also visit my web blog — reliablerxpharmacy.com review

  2. Здравствуйте. Недавно написал простую статью как с помощью библиотеки jQuery оптимизировать пространство на сайте. Слайдеры это правда очень красиво и удобно, но уже есть нечто большее чем просто слайдеры. Прошу заглянуть ко мне и узнать много нового : http://wwwvsem.info/jquery.html .

Оставить комментарий