Реализация transition для фонового изображения

23.02.2012 13:32 Автор 
Оцените материал
(1 Голосовать)

В спецификации W3C для CSS3 появилось полезное свойство transition, которое позволяет измененять свойства CSS плавно и в течении некоторого времени. Список анимируемых свойств достаточно большой:

Название свойстваТип свойства
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

Как видим, transition для свойства background-image работает только для градиента, но не для фонового изображения! Но как же быть, если нам хочется этого эффекта для фоновой картинки? И здесь на помощь к нам приходит JavaScript.

В своей работе я использую jQuery, поэтому все примеры будут приведены именно на нем, но вам ничто не мешает использовать другие библиотеки, такие как MooTools.

Для начала определим html-код для наших задач:

<div class="pic" id="id1"><a href="http://web-art.su"></a></div>

Самая важная часть — jQuery-код:

$(function () {  
  $('.pic a').append('<span class="hover"></span>').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);
      $(this).hover(function () {
        $span.stop().fadeTo(1000, 1);
      }, function () {
        $span.stop().fadeTo(1000, 0);
      });
    });
});

И CSS-код:

.pic
{
  display:inline-block;
}
.pic a{
  display:block;
  background-repeat: no-repeat;
}
.pic a span.hover{
  display:block;
  background-repeat: no-repeat;
}
 
#id1 a{
  background-image:url(img1.jpg);
}
#id1 a span.hover{
  width:120px;
  height:82px;
  background-image:url(img2.jpg);
}

<div class="pic"></div> — это основной контейнер изображения. Свойство display у него установлено в значение inline-block. Таким образом мы получаем блок, который будет вести себя подобно изображению с тэгами <img />.

Внутри этого контейнера расположены еще два блока, причём блок <span class="hover"></span> добавляется функцией jQuery. Важный момент в этой конструкции — это то, что обоим для свойства display мы присваиваем значение block. И для блока span нужно ещё указать значения ширины и высоты фонового изображения.

Ну вот, этого достаточно, чтобы получить данный эффект. Теперь, когда пользователь наведёт курсор мыши на изображение, то оно плавно смениться на другое. Время смены изображений меняется в jQuery функции. Немного сложно, но это того стоит. Для CMS Joomla! есть специльный плагин — Imagefade.

Авторизуйтесь, чтобы получить возможность оставлять комментарии