Un effet Las Vegas sur du texte

**SpaceFrog** · 10/03/2010, 09h54

Je tiens à remercier Nopain pour le titre du post

C'est lui qui a baptisé cet effet "Las Vegas"

je vous livre le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var rainbow=new Array('violet','indigo','blue','green','yellow','orange','red');
var step=0
function arcenciel(chaine){
tabchaine=chaine.split('')
var i=0
var arc=document.createElement('div')
while(tabchaine[i++]){
	var lettre=document.createElement('span')
	lettre.innerHTML=(tabchaine[i-1]==" ")?"&nbsp;":tabchaine[i-1];
	lettre.id='lettre'+(i-1)
	arc.appendChild(lettre)
	}
document.body.appendChild(arc)
var irise=setInterval (function(){colorise(tabchaine.length)},100)
}
 
 
function colorise(long){
temp=step
 
for (i=0;i<long; i++){
   couleur=(long+temp-i) % 7
   document.getElementById('lettre'+i).style.color=rainbow[couleur]
   }
   step++
   }
</script >
<style type="text/css">
body {background-color: silver;}
</style>
 
</head>
 
<body onload="arcenciel('un texte entier qui brille comme un arc en ciel')">
 
</body>
 
</html>

Et la page de démo c'est par ici

Message personnel: Daniel je compte sur toi pour en faire un addon jquery

**Nopain** · 10/03/2010, 10h03

C'est trop d'honneur pour moi

Merci SpaceFrog pour cette belle contribution JS; ...Encore une!

**danielhagnoul** · 11/03/2010, 12h38

Bonjour.

C'est fait ! http://danielhagnoul.developpez.com/...s/LasVegas.php

Mais ne me demande pas cela tous les jours, car j'ai besoin de plus de temps pour l'écrire que toi pour l'imaginer !

**SpaceFrog** · 11/03/2010, 20h07

Joli

Une question c'est normal que l'effet disparaisse au bout d'un moment ?

ha oui delay ?

après la pluie l'arc en ciel puis le beau temps ^^

**danielhagnoul** · 11/03/2010, 20h26

Si delay < 5s l'animation continue indéfiniment, mais ne ce n'est pas recommandé pour les yeux !

[Edit 12 mars 2010 11h50]

Nouveau plugin : http://danielhagnoul.developpez.com/.../elastique.php

Lorsque la séparation des caractères d'un texte est acquise, on peut travailler chaque caractère indépendamment au gré de son imagination.

**SpaceFrog** · 15/03/2010, 17h56

marrant, mais je pense que ce serait plus joli de créer un effet de vague plutot que de faire grossir brutalement.
Avec un array de tailles qui commence là ou il finit

**danielhagnoul** · 15/03/2010, 18h08

Bonsoir.

Envoyé par danielhagnoul

[...] on peut travailler chaque caractère indépendamment au gré de son imagination.

On peut imaginer beaucoup de choses et le faire de différentes manières, personnellement je l'aime bien comme cela, un élastique ne se déforme pas forcément en douceur. Mais c'est vrai que c'est un peu abrupt.

Que devient ton projet var Verif = {} avec les RegExp ?

[Edit 15 mars 23h20]

Il paraît qu'il n'y a que les cons qui ne changent pas d'avis et comme je n'en suis pas un, du moins je l'espère, j'ai changé d'avis. Tu avais parfaitement raison, c'est nettement mieux comme cela, mais ce ne fut pas sans mal, presque deux heures d'essais et erreurs avant d'avoir la bonne solution.

**SpaceFrog** · 24/03/2010, 09h43

Daniel,

Au lieu de faire carrément disparaitre tout le texte sur ta démo, tu pourrais pas juste arrêter la moulinette à couleurs et coller une couleur de fin ... et pour l'élastique coller une couleur et une taille de fin ...
J'avoue être un peu perturbé par la disparition complète des effets ...
A la limite peut être proposer aussi en option la disparition à la fin ..

**danielhagnoul** · 24/03/2010, 10h30

Bonjour.

Arrêter l'animation après un délai (entre 5s et l'infini) est un choix personnel (je trouve que l'effet agresse les yeux

et empêche la lecture du reste de la page), comme déjà dit plus haut, l'effet continuera indéfiniment si on renseigne l'option « delay:0 » et cela tant pour « nopainLasVegas » que pour « dvjhElastique ».

Arrêter l'animation, mais conserver la taille du texte et la couleur c'est une option possible pour un développement futur, mais là je manque de temps.