14 avr 2009
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
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.nukium.com
First #mootools stuff posted, please be indulgent
http://bit.ly/12VwcX Any feedback would be appreciated !
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