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

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

1.  
2. a:hover, a{
3.     transition: color 0.3s  linear;
4. }
5.  

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

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

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

1.  
2. $(".selector").backgroundImageTransition({
3. «transition-duration»: 500,
4.      «transition-timing-function»: «swing»,
5.      «transition-delay»: 0,                    
6.      «pseudo-class» : ":hover"
7. });
8.  

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

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

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

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

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

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

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

и css-правила:

1.  
2. #main-menu .css{
3.     background-image: url(«img/css.png»);
4. }
5. #main-menu .css:hover{
6.     background-image: url(«img/css_hover.png»);    
7. }
8.  

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

1.  
2.     $(".css").backgroundImageTransition({
3.         «transition-duration» : 300,
4.         «pseudo-class» : ":hover"
5.      });
6.  

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

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

1.  
2. #main-menu .psd{
3.     background: url(«img/psd.png») no-repeat;
4. }
5. #main-menu .psd:hover{
6.     background-position: 0 -172px;
7. }
8.  

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

Где взять?

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