Team-Masters.com

Que du Gratuit pour Webmasters

Rechercher

144 visiteurs par heure!

CLIQUEZ ICI, C'EST COOL ET GRATUIT !

Gagnez du trafic et de l'argent

PHP Sources

ressources graphiques



Classement de sites - Inscrivez le vôtre!

Top Clicks liendur


Un texte qui s’illumine lettre par lettre (effet néon)

L’effet consiste à afficher un texte avec une couleur de base et de lui adjoindre un effet "Néon", c’est-à-dire faire en sorte qu’une par une les lettres du texte changent de couleur.

Vous pouvez paramétrer votre couleur du texte de base, la couleur d’illumination ainsi que la vitesse correspondante. La taille et la police restent du HTML (ici, on a utilisé la balise h2)

Visualisez un exemple de l’effet Neon

Pour cela, il suffit d’insérer le code Javascript dans le BODY de votre page à l’endroit où vous souhaitez voir apparaître l’effet.

<h2>
<script language="JavaScript1.2">

var message="Bienvenue sur Team-Masters.com" //Votre texte ici
var neonbasecolor="blue" //La couleur de départ du texte ici
var neontextcolor="yellow" //La couleur de l'illumination ici
var flashspeed=100  //vitesse de propagation de l'effet en millisecondes

///Ne rien changer sous cette ligne/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h2>

Ce n’est pas bien compliqué non ?

26 avril 2005

 

Dans la même rubrique

Appliquez un filtre dynamique sur des images
Un effet Neon (II) sur du texte
Affichez un texte qui tremble en Javascript
Ouvrir une popup centrée sur l’écran
Un aura autour de votre texte
Un texte animé dans une boîte
Afficher un texte dans la barre de statut au survol d’un lien
Afficher l’heure courante dans un bouton
Faîtes apparaître un texte de gauche à droite qui s’arrête ensuite
Faîtes défiler des images en boucle (comme une visionneuse)

>> Voir tous les articles