Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.
The Images
These are the same images used in Snook’s article.
The XHTML
<h2>Example 0: No Script</h2> <ul id="noscript"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h2>Example A: Top down</h2> <ul id="a"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h2>Example B: Right left</h2> <ul id="b"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1<h2>Example 0: No Script</h2>
2<ul id=”noscript”>
3 <li><a href=”#”>Home</a></li>
4 <li><a href=”#”>About</a></li>
5 <li><a href=”#”>Contact</a></li>
6</ul>
7
8<h2>Example A: Top down</h2>
9<ul id=”a”>
10 <li><a href=”#”>Home</a></li>
11 <li><a href=”#”>About</a></li>
12 <li><a href=”#”>Contact</a></li>
13</ul>
14
15<h2>Example B: Right left</h2>
16<ul id=”b”>
17 <li><a href=”#”>Home</a></li>
18 <li><a href=”#”>About</a></li>
19 <li><a href=”#”>Contact</a></li>
20</ul>
Three menus. The first will be a simple CSS-only mouseover, the other two will be varying MooTools versions.
The 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(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1ul { list-style:none; margin:0; padding:0; }
2li { float:left; width:100px; margin:0; padding:0; text-align:center; }
3li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
4li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
5a:hover, a:focus, a:active { background-position:-150px 0; }
6#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
7#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }
Nothing too notable here.
The MooTools JavaScript
window.addEvent('domready', function() {
/* example a: top down */
$$('#a a').each(function(el) {
//fx
var fx = new Fx.Tween(el,{
duration: 500,
link: 'cancel'
});
//css & events
el.setStyle('background-position','-20px 35px').addEvents({
'mouseenter': function(e) {
e.stop();
fx.start('background-position','-20px 94px');
},
'mouseleave': function(e) {
e.stop();
fx.start('background-position','-20px 35px');
}
});
});
/* example b: right left */
$$('#b a').each(function(el) {
//css
var reset = false;
var fx = new Fx.Tween(el,{
duration: 500,
link: 'cancel',
onComplete:function() {
if(reset) {
el.setStyle('background-position','0 0');
}
}
});
//events
el.setStyle('background-position','0 0').addEvents({
'mouseenter': function(e) {
e.stop();
fx.start('background-position','-150px 0');
reset = false;
},
'mouseleave': function(e) {
reset = true;
fx.start('background-position','-300px 0');
}
});
});
});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code
1window.addEvent(‘domready’, function() {
2 /* example a: top down */
3 $$(‘#a a’).each(function(el) {
4 //fx
5 var fx = new Fx.Tween(el,{
6 duration: 500,
7 link: ‘cancel’
8 });
9
10 //css & events
11 el.setStyle(‘background-position’,'-20px 35px’).addEvents({
12 ‘mouseenter’: function(e) {
13 e.stop();
14 fx.start(‘background-position’,'-20px 94px’);
15 },
16 ‘mouseleave’: function(e) {
17 e.stop();
18 fx.start(‘background-position’,'-20px 35px’);
19 }
20 });
21 });
22
23 /* example b: right left */
24 $$(‘#b a’).each(function(el) {
25 //css
26 var reset = false;
27 var fx = new Fx.Tween(el,{
28 duration: 500,
29 link: ‘cancel’,
30 onComplete:function() {
31 if(reset) {
32 el.setStyle(‘background-position’,’0 0′);
33 }
34 }
35 });
36 //events
37 el.setStyle(‘background-position’,’0 0′).addEvents({
38 ‘mouseenter’: function(e) {
39 e.stop();
40 fx.start(‘background-position’,'-150px 0′);
41 reset = false;
42 },
43 ‘mouseleave’: function(e) {
44 reset = true;
45 fx.start(‘background-position’,'-300px 0′);
46 }
47 });
48 });
49
50});
When you mouseover the last two navigation menu links, the background image animates from one spot to another creating a flash-like effect.
