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.
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>
</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
}
{
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
Hey great effect,
ReplyDeletecan this be done using JQuery??? Would be great if you can post a tutorial using JQuery??
Finally this is mootols tuts! thanks keep on shinning.
ReplyDeletemootools rocks !
ReplyDeleteCan also be done in PHP, using date, the if statement, some css, 2 images day and night and some php and photoshop experience
ReplyDelete