Создание анимированного логотипа на jQuery

В этой статье вы узнаете, как создать анимированный логотип, причем логотип плавно изменит свой внешний вид при наведении на него курсора мышки. Как это выглядит, можно прямо сейчас узнать, кликнув по demo. Что мы будем использовать, как обычно: css, html, jquery,

Перед вами два изображения, которые я буду использовать.

HTML и CSS

Разметка предельно проста: в заголовок h1 вставлена ссылка, заголовку назначен идентификатор (id) header. Идентификатор мы будем использовать в jquery.

<h1 id="header"><a href="#">Awesome header</a></h1>

Ниже приведены CSS стили для заголовка и ссылки.

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // это позволит нам
top: 0; // позиционировать ссылку вверху-слева
left: 0; // относительно заголовка
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

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

Как вы можете видеть, ссылка позиционирована абсолютно относительно заголовка таким образом, что занимает собой всю область заголовка.

Прежде чем мы пойдем дальше, перед ссылкой необходимо добавить элемент span (добавим мы его при помощи jquery). Элемент span будет отвечать за второе изображение, которое будет проявляться при наведении мышки на заголовок. Давайте добавим стили элементу span.

HTML

<h1 id="header">
  <span class="fake-hover"></span>
  <a href="#">Awesome header</a>
</h1>

CSS

#header .fake-hover {
  margin: 0;
  padding: 0;
  width: 400px;
  height: 225px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url(header.jpg) no-repeat 0 -240px;
}

Важно правильно рассчитать размеры блоков. От точности расчетов зависит точность смены изображений.

Перейдем к javascript. Для начала удалите элемент span из html-разметки.

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

Сперва загрузите библиотеку jquery.

HTML

<script src="http://code.jquery.com/jquery.min.js" 
                                 type="text/javascript"></script>

Затем начнем писать наш код javascript. Я буду писать непосредственно в дукументе, но также можно создать отдельный файл и писать в нем.

JQuery

var Header = {
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
}
};

Хорошо. Функция получает в качестве параметра CSS-аргумент. Создаем «фейковый» span, назначаем ему display: none (тем самым удаляя его из потока) и новое содержимое вставляем в элемент (selector). Теперь давайте расширим объект header, добавив ему события, которые и будет осуществлять плавную смену изображения (анимацию) при наведении на заголовок курсора мышки. По событию mouseenter span медленно становиться видимым (fadeIn), как и второе изображение, соответственно. По событию mouseleave элемент span медленно исчезает.

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

JQuery

   var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");

//вызываем функцию, это 
//гарантирует нам, что функция будет выполняться,
// когда все необходимые элементы будут загружены

}); 

Вот и все, на мой взгляд получился превосходный анимированный логотип.

Источник