The effect I want to realize is the following. I have a "layer cloud" with some layer overlapped to the others. On "mouse over" the select layer goes down with a nice animation effect and when you release the element this goes up with an elastic effect:
Take a look at this live preview to see this script in action.
Download source code 
Live Preview1. HTML code
Create a layer which contains all elements in the "cloud" (in this case I used DIV elements):<div id="container">
<div id="contact">This is the layer about me.</div>
<div id="about">Contact me? <a href="mailto:myemail@email.com">My Email</a></div>
<div id="profile">This is my <a href="http://www.9lessons.org">website</a></div>
</div><div id="about">Contact me? <a href="mailto:myemail@email.com">My Email</a></div>
<div id="profile">This is my <a href="http://www.9lessons.org">website</a></div>
2. CSS Code
Use CSS to stylize previous elements how you prefer. In this tutorial I used this CSS code:#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 31px;
top: 66px;
border:solid 4px #CCC;
}
#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 80px;
top: 37px;
border:solid 4px #CCC;
}
...
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 31px;
top: 66px;
border:solid 4px #CCC;
}
#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 80px;
top: 37px;
border:solid 4px #CCC;
}
...
The result is something like this, a "layer cloud" with some layer overlapped to others:
You can add other overlapped layers simply adding new <div> elements in step (1) with the related CSS stlye in step 2. To overlap layer I use CSS properties "position:absolute" and "z-index" for each element.
3. JavaScript code
In order to obtain our elastic effect I used MooTools framework and some lines of Js code.No fear... it's very simple! 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(){
var zindex = 2;
$('#container div').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>var zindex = 2;
$('#container div').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fx.start(0,100);
zindex = zindex + 1;
$(o).setStyle('z-index', zindex)
},
'mouseleave' : function(e){
fx.stop()
fx.start(0);
zindex = zindex - 1;
$(o).setStyle('z-index', zindex)
}
}); 'mouseenter' : function(e){
fx.stop()
fx.start(0,100);
zindex = zindex + 1;
$(o).setStyle('z-index', zindex)
},
'mouseleave' : function(e){
fx.stop()
fx.start(0);
zindex = zindex - 1;
$(o).setStyle('z-index', zindex)
}
})
});
In this code I used a MooTools basic knowledge. In the past week I already dedicated several lessons about that. I suggest you to take a look at these post:
- Lesson 1 - Basic Tips for Web Designer
- Lesson 2 - Get elements ID using unobtrusive code
- Lesson 3 - Interaction with Forms
Download source code Live PreviewIt's all! Do you have some suggest? Add a comment!
0 comments