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

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

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

 

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

 

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

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

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

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}

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

.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}

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

.arrow:hover span {
        opacity: 1;
}

 

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

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

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

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

.arrow:after {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}

.arrow:hover:after {
        opacity: 1;
}

 

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

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

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

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

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}
.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
}

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

$(function() {
        $(".arrow3")
        .find("span")
        .hide()
        .end()
        .hover(function() {
                $(this).find("span").stop().fadeIn();
        }, function() {
                $(this).find("span").stop().fadeOut();
        });
});

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bbGJSGdCYkc/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Плавная замена одного изображения другим с использованием спрайта CSS | | 2012-06-25 16:21:45 | | Статьи Web-мастеру | | Главная» Уроки» CSS» Плавная замена одного изображения другим с использованием спрайта CSS Использование смены изображений очень легко выполнить с помощью CSS. Задаем элементу фоновое изображение, а | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: