My first post aboutmootools 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
9Lessons
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;
}
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools
ReplyDeleteJavascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton
of engaging advice and insight into front-end technologies. Even more obvious is his passion
for open source contribution and trial-and-error development, making his blog one of the
most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name