I was looking for a simple but elegant effect to highlight a menu item to announce a new feature on one of my websites.

I made a simple Mootools based script that switch periodically the color of a text element in order to create an elegant highlight effect.

This code has been tested under mootools 1.2.1 core and mootools 1.2 more builds.

Support and feedback are both available in English and in French.

Any feedback would be appreciated !

The Mootools script

View Code JAVASCRIPT
var highlight = true;
 
var periodicalFunction = function(){
	if(highlight) {
		this.tween('color', '#F89838'); //Change to your custom color
		highlight = false;
	} else {
		this.tween('color', '#000000'); //Change to your custom color
		highlight = true;
	}
}
 
window.addEvent('domready', function() {
 
	if($defined($$('.highlight'))) {
		var passedVar = $$('.highlight');
		var periodicalFunctionVar = periodicalFunction.periodical(700, passedVar); //Change to your custom time
	}
 
});

The HTML

<ul>
	<li>No highlighted</li>
	<li class="highlight">Highlighted</li>
	<li>No highlighted</li>
	<li class="highlight">Also highlighted</li>
</ul>

Live showcase

  • No highlighted
  • Highlighted
  • No highlighted
  • Visit www.kromack.com

Download showcase

Download the Mootools alternative color text effect showcase files.

Partager ce billet :


  • Print
  • PDF
  • RSS
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • HelloTxt
  • Reddit
  • Scoopeo
  • Technorati
  • Twitter
  • viadeo FR
  • Wikio FR

Mots clés pour ce billet :