"BackgroundImageTransition", smooth animation of background images

During the creation of the front-end component of a web application, one often comes across the creation of so-called hover-effects. When you hover the mouse pointer over a DOM element, the color of the link, the size of the text or the icon at the menu item changes. With technology such as CSS3 Transition , it is possible to apply animation effects to DOM elements without using javascript code. I was immediately interested in this opportunity and I began to apply it, without extra effort creating smooth transitions. For example:

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

')

Users of the latest version of browsers got nicer transitions from one color to another; in the old browsers, everything remained the same and no one lost anything.

I was very disappointed by the lack of the ability to apply CSS3 Transition for images ( background-image ). For example, if when you hover over a menu item, the icon had to change and the link color changed, the icon changed instantly, and the link color changed smoothly, it completely nullified all efforts and looked even worse than if there were no effects at all. It remained to take out the icon in a separate element or create a pseudo-element and animate the css - opacity property. But this changed the usual approach to layout. I wanted a solution in which you would not need to take care of the special structure of html markup, and in the case of pseudo-elements and css-rules. Accordingly, to avoid changes in the markup and rules in the "old layouts" (previously created using the "old" structure), in which it was decided to add a smooth animation.

Plugin settings “backgroundImageTransition”

Since most projects use the jQuery library, to solve this problem, it was decided to write a jquery plugin that would implement smooth transformations for background images, that is, for background-image .

2. $ ( ".selector" ) . backgroundImageTransition ( {
3. "Transition-duration" : 500 ,
4. "Transition-timing-function" : "swing" ,
5. "Transition-delay" : 0 ,
6. "Pseudo-class" : ": hover"
7. } ) ;

As a selector, the plug-in is passed an element or a collection of elements that need to add the ability to transform the background from one image to another.

The basic transformation settings for the plugin are made similar to the CSS3 Transition :

Property	Default value	Possible values	Description
transition-duration	0	number in milliseconds ( int )	determines the duration of the animated transition
transition-timing-function	swing	name of the function for calculating intermediate values ​​( string )	defines a function for calculating intermediate values
transition-delay	0	number in milliseconds ( int )	defines a pause before starting the animation

You can expand the possible values ​​of the transition-timing-function function by adding the appropriate jquery plugin.

Additional plugin settings:

pseudo-class	: hover	: hover,: focus, active:	connects the behavior of the plugin with a specific pseudo class
eventActivate	mouseenter	jquery event ( string )	event activating animation
eventDeActivate	mouseleave	jquery event ( string )	reverse animation event

It is recommended to use the pseudo-class parameter. It associates the behavior of the plugin with a specific pseudo-class. If you need to extend the behavior, you should use the eventActivate and eventDeActivate properties. You can pass an event on them that will trigger the animation. Then it is not necessary to define the pseudo-class option, it is a priority and will block the eventActivate , eventDeActivate settings (these parameters should be used only when there is an exact understanding of how they will work).

Principle of operation.

backgroundImageTransition.js creates two blocks with absolute positioning and locates them on top of the selector layer, the first block contains the original image, the second block the image into which the original is transformed. Blocks are created only for the duration of the animation, that is, after the completion of the animation, they are deleted. The transformation between the blocks occurs by means of the opacity css-properties. Consider the following example:



There is a html-markup menu:

2. < ul id = "main-menu" >
3. < li class = "css" > <a href = "#"> Menu item 1 < / a > < / li >
4. ...
5. < / ul >

and css rules:

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. }

Activate the plugin (for clarity, we will give the plugin a pseudo-class to which the animation will react).

2. $ ( ".css" ) . backgroundImageTransition ( {
3. "Transition-duration" : 300 ,
4. "Pseudo-class" : ": hover"
5. } ) ;

During 300ms, backgroundImageTransition renders the transformation (transition), then deletes the blocks created for the animation and shows the image from the # main-menu .css: hover , when the mouse pointer moves out of the element, the reverse actions are performed. Thus, independence from the plugin is achieved. If any other code will work with the same menu, then with a high probability there will be no conflict.



backgroundImageTransition supports working with sprites:

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

There will also be a smooth transition between the images as described above.

If the value of : focus is used as the pseudo-class parameter, it will work only for forms ( input , textarea and other form elements).

Where to get?

Download backgroundImageTransition on the official page of the plugin. There you can see the demo . Forking or writing about the errors found can be on github .