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

в 6:28, , рубрики: css, css3 transition, html, javascript, jquery plugin, метки: ,

«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-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 не нужно, она является приоритетной и перекроет настройки eventActivate, eventDeActivate (эти параметры следует использовать только тогда, когда есть точное понимание, как они будут работать).

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

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

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

  1.  
  2. <ul id=«main-menu»>

  •     <li class=«css»><a href="#">Пункт меню 1</a></li>
  •     ….
  • </ul>
  •  
  • и 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.

    Автор: Kerny

    Источник

    Поделиться

    * - обязательные к заполнению поля