Flash colors effect with MooTools Framework.
Wall Script
Wall Script
Wednesday, July 01, 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
web notification

7 comments:

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

    ReplyDelete
  2. This could be very usefull, thank you :o)

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

    ReplyDelete
  4. 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

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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X