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
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>
</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
}
No comments:
Post a Comment