Плавная замена одного изображения другим с использованием спрайта CSS

Использование смены изображений очень легко выполнить с помощью CSS. Задаем элементу фоновое изображение, а затем в его псевдо элементе :hover изменяем background-image. Самым лучшим способом будет совмещение обоих изображений в одно и использование сдвига в background-position. Такая техника называется спрайтом CSS. А если нам нужно плавно заменять одно изображение на другое без резких сдвигов?

 

Решение задачи заключается в использовании дополнительного элемента поверх оригинала с нулевым значением свойства opacity и значением свойства  background-position, установленным в нужное значение. Затем в псевдо элементе :hover плавно изменяем прозрачность. Есть три метода сделать указанное действие. Покажем на примере маленькой стрелочки.

 

Способ первый (разумный прогресс)

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

1	<a href="#" class="arrow">Стрелочка<span></span></a>

Стрелка использует замещение изображений CSS и расположение фона в позицию по умолчанию.

1

.arrow {

2	display: inline-block;

3	position: relative;

4	text-indent: -9999px;

5	width: 36px;

6	height: 36px;

7	background: url(sprites.png) no-repeat;

8

}

Здесь используется относительное позиционирование для элемента span, который будет позиционироваться абсолютно с тем же самым размером. Положение фона будет сдвигаться на место для смены изображений. Его прозрачность устанавливается в ноль и будут использоваться трансформации CSS3 для размещения его на место.

01	.arrow span {

02	position: absolute;

03	top: 0; left: 0; bottom: 0; right: 0;

04	background: url(sprites.png) no-repeat;

05	background-position: -50px 0;

06	opacity: 0;

07	-webkit-transition: opacity 0.5s;

08	-moz-transition: opacity 0.5s;

09	-o-transition: opacity 0.5s;

10

}

Затем при активации элемента изменяется прозрачность:

1	.arrow:hover span {

2	opacity: 1;

3

}

 

Способ второй (на пике технологий)

Единственная причина, по которой мы используем элемент span - на момент написания урока только Firefox 4 поддерживал трансформации для псевдо элементов. Логично предполагать, что в будущем WebKit и другие браузеры также будут их поддерживать. Мы можем изменить разметку следующим образом:

1	<a href="#" class="arrow">Стрелочка</a>

А код CSS практически такой же, только мы используем  :after вместо span:

01	.arrow:after {

02	content: "";

03	position: absolute;

04	top: 0; left: 0; bottom: 0; right: 0;

05	background: url(sprites.png) no-repeat;

06	background-position: -50px 0;

07	opacity: 0;

08	-webkit-transition: opacity 0.5s;

09	-moz-transition: opacity 0.5s;

10	-o-transition: opacity 0.5s;

11

}

12

13	.arrow:hover:after {

14	opacity: 1;

15

}

 

Способ третий (поддерживаем наработки)

Некоторые браузеры не поддерживают ни псевдо элементы, ни трансформации. Если нужно сохранить кросс-браузерность приложения, то придется использовать  избыточную разметку HTML и полагаться на JavaScript (jQuery...). Снова возвращаемся к элементу span.

1	<a href="#" class="arrow">Стрелочка<span></span></a>

Код CSS почти такой же, как и для выше обозначенных методов, но существенно упрощен, так как мы не используем псевдо классы и трансформации.

01

.arrow {

02	display: inline-block;

03	position: relative;

04	text-indent: -9999px;

05	width: 36px;

06	height: 36px;

07	background: url(sprites.png) no-repeat;

08

}

09	.arrow span {

10	position: absolute;

11	top: 0; left: 0; bottom: 0; right: 0;

12	background: url(sprites.png) no-repeat;

13	background-position: -50px 0;

14

}

jQuery будет управлять затуханием. Сначала мы скрываем элемент span, затем присоединяем функции для обработки событий mouseenter и mouseleave через функцию hover для реализации затухания.

view source

print?

01	$(function() {

02	$(".arrow3")

03	.find("span")

04

.hide()

05

.end()

06	.hover(function() {

07	$(this).find("span").stop().fadeIn();

08	}, function() {

09	$(this).find("span").stop().fadeOut();

10

});

11

});

Все три способа использованы на странице демонстрации.