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
View Code 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

4 Commentaires
tu peux éviter le périodial en créant une combinaison de chaine ou de morph . http://www.6ma.fr/tuto/mootools+jours+jour+plusieurs+morph-485
En effet, merci je vais tester ça
Intéressant
Merci maestro
New comment :