Tuesday, October 18, 2011

Mootools - Javascript Framework

Note: This tutorial it's not for beginners but it's for people already with some knowledge of Javascript, HTML and CSS.

Mootools it's a javascript framework that allows you to create animations and take your website to the next level. Check Mootools Website and check their documentation and demos.

Mootools - Javascript Framework


I leave here an exemple of how to create a cool publicity to your website using mootools function Fx.Slide.

Code:


<html>
<head>
<script src="js/codemirror.js" type="text/javascript"></script>
<script src="js/mootools-core-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-more-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-art-0.87.js" type="text/javascript"></script>


<script language="JavaScript" type="text/javascript">
/* function called when the page loads */
window.addEvent('domready', function() {

var state = 0; /* state variable  0 - out 1 - in */
var mySlideH = new Fx.Slide('slideH_div', {mode: 'horizontal', duration: 7000}); /* initialize the slide */

mySlideH.hide(); /* Initialy hide the image */
animated_truck();
window.setInterval(animated_truck,10000); /* Set the time interval to call the animated_truck function */


/* Alternate the slide state */
function animated_truck(){
if(state == 0)
{
slide_in();
state = 1;
}
else
{
slide_out();
state = 0;
}
}
  
/* Function to slide in the image */
function slide_in(){
document.getElementById('truck_img').src="images/truck2.png"; /* change the image */
mySlideH.slideIn(); /* slide in the image */
}
  
/* Function to slide out the image */
    function slide_out(){
document.getElementById('truck_img').src="images/truck4.png"; /* change the image */
mySlideH.slideOut(); /* slide out the image */
    }
});


</script>


</head>
<body>
<div id="slideH_div" style="height: 200px; width: 1000px;">
<img id="truck_img" src="images/truck2.png" style="float:right;"/>
</div>
</body>
</html>

Download: Mootools Example







3 comments:

  1. There's already a 1.4 version of mootools on their website.

    ReplyDelete
  2. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete
  3. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    ReplyDelete