Discussion :

[kolbyt]

Bonjour à toutes & à tous
avec le code ci dessous (trouvé sur le net), j'affiche "PATIENTEZ" et les lettres, une après l'autre passent indéfiniment en jaune comme un "chenillard".

Ça marche bien si le texte affiché fait 9 lettres .

Mais comment automatiser cet affichage si la longueur de $texte est différente?
exemple: $texte = "essai" ou $texte = "abcdefghijklmnopqrstuvwxyz"

PHP:

Code php :

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

1
2
3
4
5
6
7
<?php
                $texte = "PATIENTEZ";
                $long = strlen($texte);
                for ($i=1; $i <= $long ; $i++) { 
                    echo "<li>".substr($texte,$i-1,1)."</li>";
                }
?>

Css:

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
div ul li{
	list-style: none;
	color: #484848;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90px;
	letter-spacing: 15px;
	animation: flash 1.4s linear infinite;
}
@keyframes flash {
	0%  {color:#484848; text-shadow: none;}
	90% {color:#484848; text-shadow: none;}
	100%{color:#fff900; text-shadow 0 0 7px #fff900, 0 0 50px #ff6c00;}
}
 
ul li:nth-child(1){animation-delay: 0.1s;}
ul li:nth-child(2){animation-delay: 0.2s;}
ul li:nth-child(3){animation-delay: 0.3s;}
ul li:nth-child(4){animation-delay: 0.4s;}
ul li:nth-child(5){animation-delay: 0.5s;}
ul li:nth-child(6){animation-delay: 0.6s;}
ul li:nth-child(7){animation-delay: 0.7s;}
ul li:nth-child(8){animation-delay: 0.8s;}
ul li:nth-child(9){animation-delay: 0.9s;}

merci d'avance pour votre aide
Cordialement
kolbyt

[ProgElecT]

Salut

Puisque la variable $long est fonction du contenu de la variable $texte, la boucle for $i aura pour maximum le nombre de caractères moins 1.

[kolbyt]

Bonjour ProgElecT
et merci de intéresser à mon soucis

je n'ai pas été assez clair dans mes explications, pour afficher $texte, pas de problème,
mais si la longueur de $texte est différente de 9, l'animation n'est pas bonne.

donc ma question serait plutôt
comment avoir la même animation quand le nombre de caractère est différent de 9

exemple avec 6 caractères, il faut
que les lignes du css ne s'appliquent pass:

Code :

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

1
2
3
ul li:nth-child(7){animation-delay: 0.7s;}
ul li:nth-child(8){animation-delay: 0.8s;}
ul li:nth-child(9){animation-delay: 0.9s;}

et modifier animation-delai pour les lignes

Code :

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

ul li:nth-child(1 à 6){animation-delay: x.xs;}

encore merci
Cordialement
kolbyt

[NoSmoking]

Bonjour,

comment avoir la même animation quand le nombre de caractère est différent de 9

tu as la solution de créer dynamiquement, via JavaScript, ton CSS en fonction du nombre d'éléments créés. Pas sûr quand même que ta structure à base de <li> soit judicieuse !

L'autre solution est de créer plus de déclarations que le besoin, seules les utiles seront utilisées.