9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, July 8, 2009

Background Change with MooTools Framework

This is an interesting post, I had designed a day and night effect web page changing background images using MooTools framework. It's is very useful to enrich your web projects interface design. Live demo on same blogger page.

old post: Flash colors effect with MooTools Framework.

Demo : Day and Night effect
Loading.......

Code
Contains javascript and HTML code. Here google loading mootools framwork
<script src="http://www.google.com/jsapi?key=AB">
</script>
<script type="text/javascript" >
google.load("mootools", "1.2.1");
var display;
var moon = false;
var sun = false;



// This function is called every 2000 miliseconds
function tweenColor() {
var myFx = new Fx.Tween(content);
if (!moon) {
myFx.start('background-image', 'url(moon.jpg)');
moon = true;
}
else if (!sun) {
myFx.start('background-image', 'url(sun.jpg)');
sun = true;
}
else {
myFx.start('background-image', 'url(moon.jpg)');
moon = false;
sun = false;

}
}
function OnLoad(){
display = document.getElementById('display');
display.innerHTML = ' ';
// call tweenColor every 2000 miliseconds
window.setInterval(tweenColor, 2000);
}
google.setOnLoadCallback(OnLoad);
</script>
<body>
<div id="display">Loading...</div>
</body>

CSS
#display
{
font-family:'Georgia',Times New Roman, Times;
font-weight:bold;
background:url(sun.jpg);
color:#fff
}


Related Framework Tutorials :
Flash colors effect with MooTools Framework.
JQuery and Ajax Tutorials
Comments
{ 4 comments }
Anonymous said...

Hey great effect,
can this be done using JQuery??? Would be great if you can post a tutorial using JQuery??

Myfacefriends said...

Finally this is mootols tuts! thanks keep on shinning.

Sasi said...

mootools rocks !

alienone said...

Can also be done in PHP, using date, the if statement, some css, 2 images day and night and some php and photoshop experience

Post a Comment