This post illustrates three pratical examples of how you can reuse HTML and JavaScript code in order to implement totally different features for different websites changing only a few lines of code. I prepared a live preview of each tutorial and the source code which you can download and reuse in your projects quickly!
MooTools Framework
To realize these tutorial I used MooTools framework. Remeber to add this line of code into the <head> tag of your pages:<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
1. Simple animated menu
We can start with something simple. I want to implement a simple menu like this:
Moving your mouse above an element of the menu, it will change its background color with a nice fade-in effect.
Download source code 
Live PreviewStep 1. HTML Code: We can use a simple <ul> list with some <li> elements to implement our menu:
<ul id="myList">
<li id="l1">About</li>
<li id="l2">My Facebook Profile</li>
<li id="l3">Tutorials</li>
<li id="l4">My Book</li>
<li id="l5">Download</li>
<li id="l6">Contact</li>
</ul><li id="l2">My Facebook Profile</li>
<li id="l3">Tutorials</li>
<li id="l4">My Book</li>
<li id="l5">Download</li>
<li id="l6">Contact</li>
Every <li> element has a progressive ID (l1, l2, l3...)
Step 2. JavaScript Code: Now, copy and paste this 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(){
$('#myList li').each(function(item){
var o = item.id
// FX change color var
var fx = new Fx.Style(o, 'background-color', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>$('#myList li').each(function(item){
var o = item.id
// FX change color var
var fx = new Fx.Style(o, 'background-color', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fx.start('#FFFF99');
},
'mouseleave' : function(e){
fx.stop()
fx.start('#DEDEDE');
}
}); 'mouseenter' : function(e){
fx.stop()
fx.start('#FFFF99');
},
'mouseleave' : function(e){
fx.stop()
fx.start('#DEDEDE');
}
})
});
That's all. Our simple menu is now ready to be tested. Take a mind, you can implement a lot of nice effects, using MooTools FX.Transitions, simply modifying this line:
var fx = new Fx.Style(o, 'background-color', {...
...changing "background-color" with other CSS properties such as width, margin-left, color and setting the code in bold:
fx.start('#FFFF99');
...with other parameters. For example if you change "background-color" with width, you have to specify the width into fx.start for example 200px:
fx.start(200);
Download source code Live Preview2. Collapsable menu
Ok, now take a look at this second tutorial. We have to implement some collapsable box with an animated effect on mouse over (try to move your mouse over "About Me" and "Click here"):
It seems really different from the menu we've seen in the first tutorial but actually you can reuse all that code to implement this second tutorial.
Download source code Live PreviewHTML Code: copy and paste the same structure of the list we've seen on the previous example e add two lists on your page:
<ul id="topList">
<ul id="myList">
<li id="t1">...</li>
<li id="t2">...</li>
<li id="t3">...</li>
<li id="t4">...</li>
</ul><li id="t2">...</li>
<li id="t3">...</li>
<li id="t4">...</li>
<ul id="myList">
<li id="l1">...</li>
<li id="l2">...</li>
<li id="l3">...</li>
<li id="l4">...</li>
</ul><li id="l2">...</li>
<li id="l3">...</li>
<li id="l4">...</li>
You can add everything you want into <li> elements (text, images, links...).
JavaScript Code: Now you ca reuse all code we've seen in the previous tutorial changing only some lines (for example the property "height" instead of "background-color"):
<script type="text/javascript">
window.addEvent('domready', function(){
$('#myList li').each(function(item){
var o = item.id
// FX change color var
var fx = new Fx.Style(o, 'height', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>$('#myList li').each(function(item){
var o = item.id
// FX change color var
var fx = new Fx.Style(o, 'height', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fx.start(100);
},
'mouseleave' : function(e){
fx.stop()
fx.start(18);
}
}); 'mouseenter' : function(e){
fx.stop()
fx.start(100);
},
'mouseleave' : function(e){
fx.stop()
fx.start(18);
}
})
});
That's all! Try it and download the source code.
Download source code Live Preview3. Horizontal carousel
This is the last example. A nice (and absolutely simple to implement!) horizontal carousel with a really nice elastic animated effect when you scroll the content on the left or right:
Download source code Live PreviewHTML Code: Whe can use exactly the same code we've used in the two previous example. Exactly the same list. The only thig you have to do it's add an external DIV layer with ID = "stage":
<div id="stage">
<ul id="myList">
</div>
<ul id="myList">
<li id="l1">About</li>
<li id="l2">My Facebook Profile</li>
<li id="l3">Tutorials</li>
<li id="l4">My Book</li>
<li id="l5">Download</li>
<li id="l6">Contact</li>
</ul><li id="l2">My Facebook Profile</li>
<li id="l3">Tutorials</li>
<li id="l4">My Book</li>
<li id="l5">Download</li>
<li id="l6">Contact</li>
</div>
JavaScript Code: Now, copy and paste this code below the previous line of code which enables scrolling features:
<script type="text/javascript">
window.addEvent('domready', function(){
// This var define the increment value (+ or - 212 px). In the line below is initialited to 0.
var increment = 0;
// FX var
var fx = new Fx.Style('myList', 'margin-left', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
});
</script>// This var define the increment value (+ or - 212 px). In the line below is initialited to 0.
var increment = 0;
// FX var
var fx = new Fx.Style('myList', 'margin-left', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// Previous Button
$('previous').addEvents({
'click' : function(event){
increment = increment + 212;
fx.stop()
fx.start(increment);
});
// Next Button
$('next').addEvents({
'click' : function(event){
increment = increment - 212;
fx.stop()
fx.start(increment);
}
}) $('previous').addEvents({
'click' : function(event){
increment = increment + 212;
fx.stop()
fx.start(increment);
});
// Next Button
$('next').addEvents({
'click' : function(event){
increment = increment - 212;
fx.stop()
fx.start(increment);
}
});
How you can se the structure it's the same of the previous two example. I've added only a var "increment" and used two buttons (previous and next) to active scrolling features.
Download source code Live PreviewThat's all! How you can see, using the same code I realized three differents examples. Time to implement them? Less than 10 minutes! So I suggest you to organize all code you develop and reuse it when necessary.
Do you ave any suggestions? Add a comment.
No comments:
Post a Comment