Газировка для сайта или image sprites

Опубликовано Опубликовано в рубрике CSS, HTML

Думаю, многие читатели блога компании «DevEnergy» сталкивались с проблемой анимации графических ссылок. Проще говоря, хочется, чтобы ссылка «оживала» при наведении на неё курсора мыши.

Итак, нам необходимо сделать картинку на сайте ссылкой, да ещё такой, чтобы она каким-либо образом анимировалась при наведении на неё курсора.

Итерация 0. Забудем про тэг img. Работать будем с CSS. Только так у нас выйдет менять что-то по ситуации. В этом нам поможет псевдокласс hover, отвечающий за стиль элемента при наведении на него мыши. Используется он очень просто:

a:hover

Итерация 1. Сразу замечу, что эта заметка — лишь фундамент. Её принцип может быть использован в украшении анимации с помощью JavaScript.
Первый очевидный способ реализации таков: в HTML мы объявляем ссылку с пустым телом

 

После чего в CSS прописываем два состояния ссылки — простое наличие и «под курсором»

A.animated {
 background: url('адрес до картинки в спокойном состоянии');
 display: block; /*блочное отображение*/
 width: 346px; /*выставляем реальные размеры картинки*/
 height: 241px;
}

A.animated:hover { 
    background: url('адрес до картинки в состоянии hover');
}

В итоге получим результат, как здесь. При первой загрузке Вы наверняка заметили минус данного способа реализации. В первый раз ссылка «моргает» при смене картинок. Это происходит из-за того, что изображение в состоянии hover ещё не загрузилось в кэш, а ему требуется на это время. Именно поэтому все в зависимости от скорости их соединения с сервером видят пустоту. Но эта проблема решаема.

Итерация 2. На помощь нам приходят так называемые спрайты — набор определенно позиционированных изображений, лежащих в одном файле. В случае, который Вы видели в качестве примера выше, спрайт будет выглядеть примерно так:

Как видите, здесь два состояния собраны в одно. Изюминка заключается в том, что мы жёстко задаём размеры области загрузки изображения, и в спокойном состоянии в неё попадает только верхняя часть изображения (по умолчанию). Далее, в состоянии hover мы задаём смещение, которое соответствует высоте наших изображений.

Код HTML не изменится в принципе, а в CSS перемены будут следующими:

A.animated {
 background: url('адрес до спрайта');
 display: block; /*блочное отображение*/
 width: 346px; /*выставляем размеры первой картинки*/
 height: 241px;
}

A.animated:hover { 
     background-position:
     0px
     -236px; /* задаем смещение по вертикали */
}

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

Заключение. Такую конструкцию в дальнейшем удобно «прокачивать» при помощи JavaScript, добавляя, к примеру, плавности анимации. Здесь уже будет иметь место Ваш вкус и умения!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *