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.
I leave here an exemple of how to create a cool publicity to your website using mootools function Fx.Slide.
<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
There's already a 1.4 version of mootools on their website.
ReplyDeleteDavid 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.
ReplyDeleteWebsite: davidwalsh.name
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.
ReplyDeleteWebsite: davidwalsh.name