Background Change with MooTools Framework
Wall Script
Wall Script
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="https://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
web notification

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

mailxengine Youtueb channel
Make in India
X