Un effet Las Vegas sur du texte

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

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, 09h03

C'est trop d'honneur pour moi

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

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

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, 19h07

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, 19h26

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, 16h56

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, 17h08

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.

Un effet Las Vegas sur du texte

Contribuez

Vue hybride

Discussions similaires

Partager

Partager