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>
</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;
}
{
font-family:'Georgia',Times New Roman, Times;
font-size:90px;
color:#c1c1c1;
font-weight:bold;
}
Related Framework Tutorials :
JQuery and Ajax Tutorials
its nice
Gud work eh.........
This could be very usefull, thank you :o)
hi..Srinivas Tamada, nice tuts, btw how to make this source for 'h1 heading' in blogspot.
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