The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:
Take a look at the live preview to see this script in action.
Download source code 
Live Preview HTML code
HTML code is very simple. We have a list (<ul>) with some <li> elements with a progressive ID (l1, l2, l3, l4...):<ul id="menu">
<li id="l1"><a href="#">About</a></li>
<li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul><li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
CSS code
I used this simple CSS code to set the look of links but you can customize it how your prefer:#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
JavaScript code
In order to obtain our effects (elastic motion + change opacity) I used MooTools framework and some lines of Js code. In the <head> tag of the page add a link to MooTools:<script type="text/javascript" src="mootools.svn.js"> </script>
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
<script type="text/javascript">
window.addEvent('domready', function(){
$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
}); 'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
})
});
It's all! Download the source code and send your suggests!
Download source code Live Preview 
No comments:
Post a Comment