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







1 comment:

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

    ReplyDelete