Div dynamique en JS

Question

Salut à tous,

J'ai codé avec un ami une sorte de slide dynamique qui fait defiler verticalement 4 images successivements toutes les 3 secondes. On aimerait que pendant les 3 secondes durant lesquelles l'image reste affichée, une DIV contenant le title de l'image (ou au pire un texte ajouté au préalable dans le code) rentre sur l'image par le côté gauche jusqu'au centre, puis reparte d'où elle vient. Je ne sais pas si je suis clair dans ce que je veux mais j'espère l'être 

Si quelqu'un peut m'aiguiller ou même me proposer un p'tit script qui fait ça que je pourrai adapter à mon code par la suite ce serait beau 

Merci d'avance

PetoleTeam · Answer

Bonjour,
il te suffit de faire un slide Horizontal Gauche/Droite que tu synchronise avec ton slide Vertical.

;O)

xstaz94 · Answer

Tout le problème est dans la synchronisation

@karamel · Answer

si le div qui contient l'image fait 100 px et que celui qui contient le texte fait aussi 100 px il faudra donc parcourir 200 px en 3 secondes ou 3000 milisecondes on doit donc definir le deplacement par miliseconde et le timeout 

pour connaitre le deplacement par miliseconde on vas diviser les 200px par 3000 et on obtient 0.66

si on decide de mettre un timeout de de 10 milisecondes on multiplira 10
par 0.66 ce qui donnera 6.66 px de deplacement a chaque interval

PetoleTeam · Answer

Bonjour à tous,
j'aurais assez bien vu cela comme synchronisation
je présumes que tu as une fonction de défilement appelons la DEFILE_IMAGE, pour les images et il t'en faut une pour le texte, DEFILE_TEXTE par exemple.

L'algorithme pourrait ressembler à cela

DEFILE_IMAGE
  INCREMENTE Position Image;
  SI Image PAS en Position ALORS
    RELANCE DEFILE_IMAGE delai;
  SINON
    LANCE DEFILE_TEXTE;
  FIN SI

DEFILE_TEXTE
  INCREMENTE Position Texte;
  SI Texte PAS en Position ALORS
    RELANCE DEFILE_TEXTE delai;
  SINON
    LANCE DEFILE_IMAGE suivante;
  FIN SI
et ainsi de suite pour les grandes lignes

KAZMA t'a donné ce qu'il fallait pour calculer au mieux ton délai de 3s entre images.
;O)

Div dynamique en JS

4 réponses

Votre réponse

Discussions similaires