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

Flash colors effect with MooTools Framework.

My first post about mootools framework it's powerful, cross-browser, and flexible. In this post how to implement flash colors effect with mootools framework form Google Ajax Libraries API. It's simple and useful to display colorful titles on your web projects.


Demo
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 content;
var blue = false;
var pink = false;
var green = false;

// This function is called every 1000 miliseconds
function tweenColor() {
var myFx = new Fx.Tween(content);
if (!blue) {
myFx.start('color', '#52ABCC');
blue = true;
}
else if (!pink) {
myFx.start('color', '#EE5588');
pink = true;
}
else if (!green) {
myFx.start('color', '#7daa13');
green = true;
}
else
{
myFx.start('color', '#c1c1c1');
blue = false;
pink = false;
green = false;
}
}
function OnLoad(){
content = document.getElementById('content');
content.innerHTML = '9Lessons';
// call tweenColor every 1000 miliseconds
window.setInterval(tweenColor, 1000);
}
google.setOnLoadCallback(OnLoad);
</script>
<body>
<div id="content">Loading...</div>
</body>



CSS
#content
{
font-family:'Georgia',Times New Roman, Times;
font-size:90px;
color:#c1c1c1;
font-weight:bold;
}


Related Framework Tutorials :

JQuery and Ajax Tutorials
Comments
{ 7 comments }
sathish chowdary said...

its nice

Anonymous said...

Gud work eh.........

Brian said...

This could be very usefull, thank you :o)

choen said...

hi..Srinivas Tamada, nice tuts, btw how to make this source for 'h1 heading' in blogspot.

Anonymous said...

I tried to use this but it expands right across the top of my page and wont actually stay small but great job am trying to tweak to work for me

josea said...

pls help me:( do i need internet connection on this??? pls reply.. can i run this on localhost???

quybka said...

thanks

Post a Comment