fbtui
Messages postés8Date d'inscriptionmercredi 23 février 2005StatutMembreDernière intervention22 mai 2005
-
27 avril 2005 à 00:28
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDernière intervention 3 avril 2008
-
30 avril 2005 à 17:19
Bonjour,
Je cherche (sans succès) un script qui permet d'animer un texte, comme si le faisceau d'un phare l'éclairait de façon répétitive. Je suis allé sur les sites en anglais également, mais encore sans succès.
Merci de m'informer si cela existe, et si on peut le télécharger.
Cordialement
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDernière intervention 3 avril 20083 30 avril 2005 à 17:19
Bonjour!
Pour ceux que ça interesse, j'ai fait des corrections au script :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PHARE</title>
<STYLE type= "text/css">
. phare1 {font-size:18px;font-family:times;font-weight:bold;text-decoration:overline underline;} .phare2 {font-size:22px;font-family:arial;color:red;} </STYLE>
<script type ="text/javascript">
var nbrPhare = 0;
function phare(idDivParent, texte, longueurEffet, classOptionnel)
{
this.texte = texte;
this.divParent = document.getElementById(idDivParent);
this.phareNo = nbrPhare;
this.longueur = longueurEffet;
this.classO = phare.arguments.length==4?classOptionnel : null;
this.couleurs = new Array();
this.durees = new Array();
this.attentes = new Array();
this.ajouterCouleurEtTemps = couleurTemps;
this.departAnimationPhare = startPhare;
nbrPhare++;
}
function couleurTemps(couleur,dureeEnSeconde,delaiAttenteEnSecondes)
{ this.couleurs.push(couleur);
this.durees.push(dureeEnSeconde);
this.attentes.push(delaiAttenteEnSecondes);
} function startPhare()
{ var monDiv = document.createElement("div");
for (var i= 0;i<this.texte.length;i++)
{
var sp = document.createElement("span");
sp.innerHTML = this.texte.charAt(i)==" "?" " : this.texte.charAt(i);
monDiv.appendChild(sp);
} monDiv.id = "PHARE"+this.phareNo;
monDiv.spans = monDiv.childNodes;
if (this.classO) monDiv.className=this.classO;
monDiv.objPhare = this;
monDiv.car = 0;
monDiv.coul = 0;
this.divParent.appendChild(monDiv);
anim(this.phareNo);
}
function anim(no)
{ var monDiv = document.getElementById("PHARE"+no);
var monPhare = monDiv.objPhare;
var texte = monPhare.texte;
var vit = (monPhare.durees[monDiv.coul]*1000)/texte.length;
for (var i=0;i<texte.length;i++)
if (i>=monDiv.car && i < monDiv.car + monPhare.longueur)
monDiv.spans[i].style.color=monPhare.couleurs[monDiv.coul];
else
monDiv.spans[i].style.color="";
if (monDiv.car == texte.length)
{
monDiv.car = 0;
var att= monPhare.attentes[monDiv.coul];
monDiv.coul = monDiv.coul==monPhare.couleurs.length-1?0 : monDiv.coul+1;
setTimeout("anim("+no+")",att*1000);
} else
{ monDiv.car++;
setTimeout("anim("+no+")",vit);
} } </script>
</head>
"ph1">
<script type ="text/javascript">
toto = new phare("ph1","Un texte défini avec la class phare1",2,"phare1");
toto.ajouterCouleurEtTemps("#ff0000",3,1);
toto.ajouterCouleurEtTemps("RGB(0, 0, 255)",2,3);
toto.departAnimationPhare();
</script>
"ph2">
<script type="text/javascript">
titi = new phare("ph2","Un autre texte défini avec la class phare2",5,"phare2");
titi.ajouterCouleurEtTemps("yellow",2,2);
titi.ajouterCouleurEtTemps("magenta",3,1);
titi.ajouterCouleurEtTemps("#00ff00",1,6);
titi.departAnimationPhare();
</script>
"ph3">
<script type="text/javascript">
lolo = new phare("ph3","Texte sans class de defaut",8);
lolo.ajouterCouleurEtTemps("tomato",2,5);
lolo.departAnimationPhare();
</script>
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDernière intervention 3 avril 20083 27 avril 2005 à 03:16
Salut!
Est-ce que tu cherches un script d'animation en javascript/dhtml ou bien une animation qui serait fait par exemple en flash?
Si tu cherche un truc en javascript/dhtml, c'est possible mais il ne faut pas s'attendre a un truc hyper réaliste.
J'ai quelques idées qui me vient a l'esprit mais il faudrait plus de détail avant du mettre du temps sur un tel script dhtml
Donne le plus de détail possible sur ce que tu t'attend comme résultat. Par exemple, est-ce que le faisceau doit être apparent que sur le texte (changer la couleur du texte) comme sur ce script ; http://www.editeurjavascript.com/scripts/scripts_textes_1_85.php ou c'est vraiement un hallo cerculaire éclairant le texte?
Donne des précisions et je verai ce que je peux faire.
fbtui
Messages postés8Date d'inscriptionmercredi 23 février 2005StatutMembreDernière intervention22 mai 2005 27 avril 2005 à 12:01
Bonjour Ghislain,
Merci pour ta promptitude et ta proposition.
Le script que tu proposes est déjà très bien pour le néophyte que je suis. Néanmoins le fasiceau doit balayer toujours dans le même sens (de G à D) sans faire de va et vient, avec également une vitesse un peu plus lente, voire un rythme, voire des couleurs. Mais faut-il faire des animations compliquées?
par exemple 1 éclat blanc long (durée 2 secondes), 3 secondes sans éclat, puis un éclat rouge court (durée 1 seconde), 5 secondes sans éclat, puis on recommence.
J'avais trouvé une animation gif:
Ceci dit je l'ai copié, donc il ne m'appartient pas. De plus je souhaiterai que l'animation concerne un texte.
Encore merci à toi, et cordialement
Frank
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDernière intervention 3 avril 20083 28 avril 2005 à 13:38
Salut!
J'ai fait un script d'après tes spécifications. Je n'ai pas eu le temps de mettre des commentaire mais j'ai mis trois exemples qui sont tout de même explicite.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type ="text/javascript">
toto
=
new phare
("Un texte défini avec la class phare1",2,"phare1");
toto
.ajouterCouleurEtTemps
("#ff0000",3,1);
toto
.ajouterCouleurEtTemps
("RGB(0, 0, 255)",2,3);
toto
.departAnimationPhare
();
</script>
<script type="text/javascript">
titi
=
new phare
("Un autre texte défini avec la class phare2",5,"phare2");
titi
.ajouterCouleurEtTemps
("yellow",2,2);
titi
.ajouterCouleurEtTemps
("magenta",3,1);
titi
.ajouterCouleurEtTemps
("#00ff00",1,6);
titi
.departAnimationPhare
();
</script>
<script type="text/javascript">
lolo
=
new phare
("Texte sans class de defaut",8);
lolo
.ajouterCouleurEtTemps
("tomato",2,5);
lolo
.departAnimationPhare
();
</script>
</html>
A+, Ghislain
Vous n’avez pas trouvé la réponse que vous recherchez ?
fbtui
Messages postés8Date d'inscriptionmercredi 23 février 2005StatutMembreDernière intervention22 mai 2005 28 avril 2005 à 15:40
Bonjour Ghislain,
Alors la je suis bouche bée. C'est exactement ce que je cherche. Les trois exemples sont très sympa, avec une préférence pour le 2 et le 3. Je vais voir comment insérer cela dans mon site.
Le débutant que je suis te remercie sincèrement pour t'être attaché à me trouver une solution efficace et rapidement.
Encore merci et Bien à toi.
Ps je ne clos pas encore le sujet
fbtui
Messages postés8Date d'inscriptionmercredi 23 février 2005StatutMembreDernière intervention22 mai 2005 29 avril 2005 à 02:53
Bonjour Sylvain,
Encore une fois merci, mais j'ai un petit souci dans l'utilisation de ton script ou plutôt son intégration dans mon site. Comme je te l'ai dit, même si j'ai fait pas mal de basic et une pincée d'assembleur il y a très longtemps, je ne sais pas programmer.
Je développe avec Dream Mx via l'interface Création. Je vais le moins possible sur la page code.
J'ai donc copié la première partie de ton script entre les balises HEAD de la page sur laquelle je souhaite voir ce script fonctionner, et la fin (la var titi) entre les balises BODY.
Or cela ne fonctionne pas. J'obtiens un message d'erreur IE ne peut ouvrir le site file, Opération abandonnée. Par ailleurs la copie intégrale de ton code sur une page vierge fonctionne à merveille.
Que faut-il faire?
Merci par avance et cordialement
Frank
GhislainLavoie
Messages postés289Date d'inscriptionvendredi 11 mars 2005StatutMembreDernière intervention 3 avril 20083 30 avril 2005 à 00:30
Salut Frank,
Je ne connait pas Dream Mx et aucun autre logiciel visuel de type WYSIWYG d"ailleur. Je programme toujours directement dans le code.
La partie du script qui est dans la balise <head></head> doit être mis dans le head ou un fichier a part avec un extention .js (sans les balises de <script> et </script>) et inseré sans le head comme ceci (avantage de permettre la réutilisation sur un autre page).
La partie du script qui fait appel qui batit l'appel au fonction de l'objet phare doit être inseré là ou tu veux dans la page dans le body.
Par exemple dans un cellule :
<td>
<script type="text/javascript">
titi
=
new phare
("Un autre texte défini avec la class phare2",5,"phare2");
titi
.ajouterCouleurEtTemps
("yellow",2,2);
titi
.ajouterCouleurEtTemps
("magenta",3,1);
titi
.ajouterCouleurEtTemps
("#00ff00",1,6);
titi
.departAnimationPhare
();
</script>
</td>
Voilà
Je ne sait pas si ton loguciel te permet d'inserer des scripts mais je te conseil d'ajouter ça directement dans le code et a la limite avec un éditeur de texte.
Si le problème persiste, veuillez appeler notre centre d'assistance 24 heures au numéro a l'endos de la facture au montant de 490? (incluant ce service) que vous receverez bientôt par la poste.
Blague a part, si ça persiste, envoi moi le lien de test sur ton site a [mailto:lavoghis@hotmail.com lavoghis@hotmail.com] ou un message privé et je regarderai ça.