CSS спрайты и анимационные кнопки

Привет, друзья! Сегодня хочу рассказать об одном интересном, а главное полезном приеме для веб-мастеров, о css спрайтах. О том, что это такое и с чем его едят под катом, прошу.В первую очередь css спрайты – это изображения. А точнее это несколько изображений собранные в одно большое, вот, например, так: Такое скомпонованное изображение назначается в качестве фона для html-элемента и задаются координаты этого фона, чтобы выбрать нужный кусок спрайта. Все очень просто, давайте попробуем поэкспериментировать с первым изображением.

Создадим пустой DIV и применим к нему класс spriteTest:

<div class=”spriteTest”>

</div>

И соответственно создадим сам класс: .spriteTest { background: src(zoo_sprite.jpg) no-repeat; background-position:0px 0px; width:95px; height:85px; } Первой строчкой мы назначаем фон элементу, второй задаем начальные координаты фона относительно элемента, к которому фон применен (первое значение –X, второе - Y), третьей и четвертой ширину и высоту элемента соответственно. Если посмотреть на результат, то мы увидим рыбку: Но мне больше нравится попугай, и я изменю координаты фона и габариты (ширину и высоту) элемента, чтобы увидеть именно его: .spriteTest { background: src(zoo_sprite.jpg) no-repeat; background-position: -95px -85px; width: 85px; height: 85px; } В результате видим попугая Как видите все очень просто, но в чем выигрыш при использовании спрайта вместо нескольких изображений? Все дело в скорости. Для загрузки нескольких изображений на страницу, создается столько же HTML запросов к серверу. При загрузке нескольких изображений с помощью спрайта браузеру понадобится всего один HTML запрос.

Обычно в спрайты компонуют мелкие элементы интерфейса, например, иконки.

Со спрайтами все просто, но на основе техники, которая в них используется, можно создать красивые анимации для кнопок, вот на подобие таких:

Посмотреть демо анимированных кнопок

Чтобы сделать такие эффекты одного css не достаточно, нужно задействовать JavaScript, я в частности использую фреймворк jQuery. Давайте попробуем создать одну из кнопок, которые я привел в предыдущем примере.

В первую очередь нам понадобится изображение фона: Когда оно готово создадим саму кнопку:

<input class="animateButton" type="button" value="Загрузить" />

И соответствующий класс для нее: .animateButton { background: url(buttonBg.jpg) repeat-x; border: 1px solid #ccc; width: 120px; height: 40px; color: #4f4f4f; } Обратите внимание на атрибут repeat-x, он нужен для того чтобы изображение постоянно повторялось по горизонтали.

И последнее, что нужно сделать, это написать на JavaScript простенький код для обработки нажатия на кнопку и функцию для анимации фона. Как вы уже догадались, анимация будет состоять только в изменении координаты X для фона. Сначала я приведу код, а потом немного его поясню:

$(document).ready(function(){
var buttonClicked = false;
function moveBackGround(bgx,delay)
{
var bgXDelta = 5; //на сколько пикселей сместить фон
var newBgX = bgx-bgXDelta; //новое значение координаты X фона
$('.animateButton').css('background-position', newBgX+'px 0px'); //смещаем фон
$('.animateButton').attr('value','Загружается'); //изменяем надпись на кнопке
setTimeout(function(){moveBackGround(newBgX,delay);},delay);    //рекуррентный вызов функции, чтобы продолжить смещение
}
$('.animateButton').click(function(){
if(!buttonClicked) //проверяем нажата ли уже кнопка
{
moveBackGround(0,50); //вызываем функцию для анимации
buttonClicked = true; //говорим, что кнопка нажата
}
});
});

Переменная buttonClicked нужна для блокировки повторного нажатия кнопки. Функции moveBackGround мы передаем 2 значения: первое – начальное значение координаты X фона, а второе – задержка, с которой будет осуществляется приращение к координате X. Все остальное понятно из комментариев к коду.

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

Так как по нажатию на кнопку должно происходить какое-то действие (ajax-подгрузка например), то по окончании этого действия анимация кнопки должна завершиться. Сделать это очень просто всего одной проверкой в функции moveBackGround, но это останется для вас домашним заданием =)

Жду ваших замечаний и предложений в комментариях. Удачи, друзья!

Конечно, в web уже давно вписали различные редакторы анимаций, но я нашел инструмент по лучше. С ним создание видеороликов становится намного проще и удобнее. Подробную информацию вы сможете получить на сайте http://wm-d.ru.

Дата публикации: 2020-10-09

Автор статьи:
Alex Zolnov