Background Change with MooTools Framework
Wall Script
Follow Me:
Wednesday, July 08, 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
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


4 comments:

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

    ReplyDelete
  2. Finally this is mootols tuts! thanks keep on shinning.

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

    ReplyDelete

Make in India