Discussion :

[sicho]

Bonjour,

je souhaiterai savoir comment je pourrais faire apparaître des mots sur une page html en JS de façon zoomé.

En gros c'est comme pour afficher une devise, que le premier mot apparaisse en grossissant, qu'il reparte en diminuant, et ainsi de suite pour le second,... en boucle. (si en plus il était possible de les faire apparaitre pas exactement au même endroit mais légèrement plus a droite ou gauche ou plus haut ou bas ce serait un must afin de donner un peu plus de dynamisme à la page.)

je pensais à mettre ma liste de mots dans un tableau genre :

Code :

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

1
2
3
4
5
message = new Array()
message[1]="mot1"
message[2]="mot2"
message[3]="mot3"
message[4]="mot4"

et appeler chaque indice du tableau un par un à une certaine coordonnée.
Le mot serai d'une petite taille qui augmenterai petit à petit et ensuite rediminuerais et appellerai l'indice suivant à l'affichage.

merci d'avance de votre aide.

Damien.

[SpaceFrog]

regarde du coté de jquery animate()

[sicho]

Re, merci de ta réponse j'ai fait des recherchez, je ne connaissais pas jquery ça semble assez pratique ce framework.

d'après mes recherche ça devrai fonctionner si j'ajoute dans ma page:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
        var mots = ['Mot1', 'Mot2', 'Mot3', 'Mot4'];
 
        $.each(mots, function(i, val) {
            setTimeout(function() {
                $('#divDispMots').fadeOut("slow", function() {
                    $(this).text(val).fadeIn("slow");
                });
            }, i * 3000);
        });
</script>

et que je positionne mon divDispMots dans le html où je souhaite afficher mes mots.

Je test et vous tiens au courant.

Encore Merci.

[arnogues]

sicho, il manque des informations dans ce que tu demandes. Comment doivent être présentés les mots dans la page ?
- Ils doivent tous se suivre ?
- Ils doivent apparaitre les uns après les autres ?

En gros c'est comme pour afficher une devise

J'ai pas compris ce que tu veux dire par là. Si tu as un exemple que tu as vu en ligne on est preneur

[sicho]

Ils doivent apparaître les un après les autres dans l'ordre ou pas je m'en fiche mais en boucle en continu.

Je souhaiterai les afficher par dessus une bannière.
Je n'en ai pas vu mais c'est pour faire un équivalent d'un projet que je voulais faire en flash à la base, mais que j'ai fait finalement en html5 css3.

http://n.flamel.free.fr/ en haut à droite près des coordonnées.

voilà ce que je souhaiterai en js.

[sicho]

Re, merci de ta réponse j'ai fait des recherchez, je ne connaissais pas jquery ça semble assez pratique ce framework.

d'après mes recherche ça devrai fonctionner si j'ajoute dans ma page:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
        var mots = ['Mot1', 'Mot2', 'Mot3', 'Mot4'];
 
        $.each(mots, function(i, val) {
            setTimeout(function() {
                $('#divDispMots').fadeOut("slow", function() {
                    $(this).text(val).fadeIn("slow");
                });
            }, i * 3000);
        });
</script>

et que je positionne mon divDispMots dans le html où je souhaite afficher mes mots.

Je test et vous tiens au courant.

Encore Merci.

En relisant bien je ne suis pas sur que ça fonctionne du moins pas en boucle comme je le souhaite.

[sicho]

Des idées pour avoir un effet vraiment d'apparition des mots, plus qu'un simple fading qui joue sur l’opacité?

Je remet le lien de la maquette flash, vite faite pour avoir une idée de l'apparition des mots comme je le souhaite.

http://n.flamel.free.fr/ en haut à droite près des coordonnées.

Merci encore.

[SpaceFrog]

sinon il y a un plugin très intéressant pour faire ce genre d'animations: jQuery Cycle.

[NoSmoking]

Bonjour,

regarde du coté de jquery animate()

http://n.flamel.free.fr/ en haut à droite près des coordonnées.

j'ai l'impression que le premier exemple fourni,Example: Click the button to animate the div with a number of different properties., correspond à ton besoin, avec un minimum d'aménagement.