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