September 26, 2008 at Animated background using jQuery or “Hey, it's cool!” Like Flash! ”
Entertaining crafts from Jonathan Snook . This article will be interesting for beginners rather than more sophisticated developers, although Mr. Snook is quite authoritative and his techniques can be useful to everyone.
So, in this article we will talk about how not only to make the background of page elements behave lively, but also to do this using the simplest layout possible. I ask all the thanks and questions to be addressed to the real author of the aforementioned one, I only translate quite freely what was 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 efforts.
The basis for writing this note was an article by Dave Shea on the use ofsprites along with jQuery (from myself I note that the technique described there works a little " not very " - it slows down and sometimes behaves inappropriately). And, as mentioned earlier, the task was to provide a more convenient way to implement Dave’s ideas.
The essence of the method described here lies in changing the position of the background elements. However, for all its versatility, jQuery can hardly cope with moving the background because it requires changing two values (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(its version should be at least 1.0.2 - 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.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, the library itself is needed, and the plug-in (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})
})
.css( {backgroundPosition: "0 0"} )mouseoverand begins mouseout. Jonathan notes that even in jQuery there is a method
hover(which includes both events) that is more convenient, for tight control over execution, is a separate processing of mouseover and mouse pointer removal events. Thus, the script prevents repeated playback of the animation when you hover over multiple times.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 picture lies purely in the field of imagination of one or another developer. Each new version of the sprite leads to a new interesting effect.
Another example:
In the same case, " moving " occurs vertically. Moreover, the smoother the transition between image colors, the less noticeable will be the movement as such. Accordingly, there will be a milder fading effect (see the example “Example C: Fade 1-color”).