The animated background means jQuery or “Hey, but it's cool! Like Flash! ”

Entertaining crafts from Jonathan Snook . This article will be more interesting to beginners than to more sophisticated developers, although Mr. Snook is quite authoritative and his methods can be useful to everyone.

So, this article will discuss how to not only make the background of the page elements behave vividly, but also to do this using the simplest possible markup. I would like to send all thanks and questions to the present author mentioned above; I only quite freely translate what is written on his website . Also, so that readers do not have to waste their time, it makes sense to look at the end result of the effort.

The basis for writing this note was the article by Dave Shi on the use of sprites with jQuery (from myself I note that the technique described there works a little " not very " - slows down and sometimes behaves inadequately). And, as mentioned earlier, the task consisted in a more convenient way of translating Dave's idea.
')
The essence of the method described here lies in changing the position of the background elements. However, with all its versatility, jQuery can hardly cope with moving the background because it requires changing two values ​​(the vertical and horizontal position of the background image) at the same time. Jonathan found a way out of the situation with the help of the Background-Position Animations plugin (his version must be at least 1.0.2 - the earlier ones do not support negative and decimal values).

What do you need?

HTML

An example involves creating a menu. The markup is extremely simple and straightforward.

 <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> 

CSS

 ul {
	 list-style: none;
	 margin: 0;
	 padding: 0;
 }
 li {
	 float: left;
	 width: 100px;
	 margin: 0;
	 padding: 0;
	 text-align: center;
 }
 li a {
	 display: block;
	 padding: 5px 10px;
	 height: 100%;
	 color: #FFF;
	 text-decoration: none;
	 border-right: 1px solid #FFF;
 }
 li a {
	 background: url (bg.jpg) repeat 0 0;
 }
 li a: hover {
	 background-position: 50px 0;
 }

jQuery

From jQuery, you need the library itself, and the plugin (Background-Position Animations) mentioned above. The script is the following:

 $ ('# nav a')
	 .css ({backgroundPosition: "0 0"})
	 .mouseover (function () {
		 $ (this) .stop (). animate (
			 {backgroundPosition: "(0 -250px)"}, 
			 {duration: 500})
		 })
	 .mouseout (function () {
		 $ (this) .stop (). animate (
			 {backgroundPosition: "(0 0)"}, 
			 {duration: 500})
		 })

After setting the initial background position:

 .css( {backgroundPosition: "0 0"} ) 

the animation starts for the mouseover and mouseout .

Jonathan notes that even though jQuery has a hover method (which includes both events), it is more convenient, for tighter control over execution, to handle hover events and delete the mouse pointer separately. Thus, the script prevents the animation from re-playing when the cursor is repeated.

Sprite (the one that bg.jpg )

In this case, the animation will occur by changing the position of the background from left to right. The choice of pictures is purely in the fantasy of a particular developer. Each new version of the sprite leads to a new interesting effect.

Another example:

In this case, the " movement " occurs vertically. In this case, the smoother the transition between the colors of the image, the less noticeable will be the movement as such. Accordingly, there will be a softer damping effect (see the example “Example C: Fade 1-color”).

Related Links (English-speaking resources)

• Animated navigation bar (CSS and jQuery)
• Sprites and jQuery - the case for JavaScript
• JQuery Animated Navigation
• Creating the Garage Doors Effect

That's all! Thank you all for your attention.