«backgroundImageTransition», плавная анимация фоновых изображений

86560b57b5087b60f18537608ae42ccb

Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы. Например:

a:hover, a{
    transition: color 0.3s  linear;
}

Пользователи браузеров последних версий получали более симпатичные переходы от одного цвета к другому, в старых же браузерах все оставалось по прежнему и никто ничего не терял.
Меня очень разочаровало отсутствие возможности применять CSS3 Transition для изображений (background-image). Например, если при наведении на пункт меню должна была поменяться иконка и измениться цвет ссылки, то иконка менялась мгновенно, а цвет у ссылки плавно, это совершенно сводило на нет все усилия и смотрелось еще хуже, чем если бы эффектов совсем не было. Оставалось выносить иконку в отдельный элемент или создавать псевдоэлемент и анимировать css — свойство opacity. Но это меняло привычный подход к верстке. Хотелось решения, в котором не нужно было бы заботиться об особой структуре html-разметки, а в случае с псевдоэлементами и css-правил. Соответственно, избежать изменений в разметке и правилах в «старых макетах» (сверстанных ранее с использованием «старой» структуры), в которые было решено добавить плавную анимацию.

Настройки плагина «backgroundImageTransition»

По скольку в большинстве проектов используется библиотека jQuery, для решения этой проблемы было решено написать jquery-плагин, который бы реализовывал плавные трансформации для фоновых изображений, т.е для background-image.

$(".selector").backgroundImageTransition({
«transition-duration»: 500,
     «transition-timing-function»: «swing»,
     «transition-delay»: 0,
     «pseudo-class» : ":hover"
});

В качестве селектора плагину передается элемент или коллекция элементов которым требуется добавить возможность трансформации фона из одного изображения в другое.
Основные настройки трансформаций у плагина сделаны по аналогии с CSS3 Transition:

Свойство Значение по умолчанию Возможные значения Описание
transition-duration 0 число в миллисекундах (int) определяет длительность анимированного перехода
transition-timing-function swing название функции расчета промежуточных значений (string) определяет функцию для расчета промежуточных значений
transition-delay 0 число в миллисекундах (int) определяет паузу перед началом анимации

Расширить возможные значение функции transition-timing-function, можно добавив соответствующий jquery-плагин.
Дополнительные настройки плагина:

pseudo-class : hover : hover,: focus,: active связывает поведение плагина с определенным псевдоклассом
eventActivate mouseenter jquery событие (string) событие, активирующее анимацию
eventDeActivate mouseleave jquery событие (string) событие, активирующее обратную анимацию

Рекомендуется использовать параметр pseudo-class. Он связывает поведение плагина с определенным псевдоклассом. Если нужно расширить поведение, то следует использовать свойства eventActivate и eventDeActivate в них можно передавать событие по которому запустится анимация. Тогда определять опцию pseudo-class не нужно, она является приоритетной и перекроет настройки eventActivateeventDeActivate (эти параметры следует использовать только тогда, когда есть точное понимание, как они будут работать).

Принцип работы.

backgroundImageTransition.js создает два блока с абсолютным позиционированием и располагает их по верх слоя селектора, первый блок содержит исходное изображение, второй блок изображение в которое трансформируется исходное. Блоки создаются только на время анимации, т.е после завершения анимации они удаляются. Трансформация между блоками происходит по средствам css-свойства opacity. Рассмотрим следующий пример:

Есть html-разметка меню:

<ul id=«main-menu»>
    <li class=«css»><a href="#">Пункт меню 1</a></li>
    ….
</ul>

и css-правила:

#main-menu .css{
    background-image: url(«img/css.png»);
}
#main-menu .css:hover{
    background-image: url(«img/css_hover.png»);
}

Активируем плагин (для наглядности передадим плагину псевдокласс на который будет реагировать анимация).

$(".css").backgroundImageTransition({
        «transition-duration» : 300,
        «pseudo-class» : ":hover"
     });

В течении 300ms backgroundImageTransition визуализирует трансформацию (переход), затем удаляет блоки созданные для анимации и показывает изображение из #main-menu .css: hover, когда указатель мыши выходит за пределы элемента выполняются обратные действия. Таким образом, добивается независимость от плагина. Если какой-либо другой код будет работать с этим же меню, то с большой вероятностью конфликта не произойдет.

backgroundImageTransition поддерживает работу со спрайтами:

#main-menu .psd{
    background: url(«img/psd.png») no-repeat;
}
#main-menu .psd:hover{
    background-position: 0 -172px;
}

Между изображениями также будет выполнен плавный переход по выше приведенной схеме.
Если в качестве параметра pseudo-class используется значение : focus, то оно будет работать только для форм (input,textarea и прочие элемент форм).

Где взять?

Скачать backgroundImageTransition можно на официальной странице плагина. Там же можно посмотреть демо. Форкнуть или написать об обнаруженных ошибках можно на github.