11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Réitération d'une animation à la sortie de la fenêtre

Bonjour à tous !

Dans le cadre d'une intégration de thème, j'aimerai rendre ce dernier un peu plus vivant en faisant bouger différents éléments décoratifs. Pour faire simple, j'ai plusieurs div représentant des nuages et j'aimerai tout simplement qu'ils se déplacent horizontalement. Le déplacement commence et se termine hors fenêtre (je ne sais pas si c'est très clair).

Pour cela, pas de souci, .animate() fait l'affaire. Par contre, j'aurais souhaité que lorsque le nuage quitte la fenêtre, il revienne automatiquement à gauche (dans le côté hors fenêtre gauche de ma page du coup), comme si il avait fait un tour en fait. C'est légèrement plus tricky pour moi Smiley decu . Quelqu'un aurait-il des pistes sur lesquels je puisse me pencher pour réaliser cela ?

Merci d'avance !
Salut,

perso j'aurai fait ça en css Smiley cligne

je t'ai mis 2 exemples à adapter

exemple


<img class="cloud" src="http://www.clker.com/cliparts/a/4/8/6/1216139826649869464rgtaylor_csc_net_wan_cloud.svg.med.png" alt="cloud">
<img class="cloud2" src="http://www.clker.com/cliparts/a/4/8/6/1216139826649869464rgtaylor_csc_net_wan_cloud.svg.med.png" alt="cloud">




.cloud{
   animation: move_cloud 5s infinite; //allez simple
}

.cloud2{
   animation: move_cloud 10s infinite alternate; //allez retour   
}

@keyframes move_cloud {
  0% {
    transform: translate(-200%, 0);
  }
  
  100% {
    transform: translate(250%, 0);
  }
 }

Modifié par biduletruck (24 Mar 2018 - 16:16)
Meilleure solution
Apparament le CSS me réserve encore quelques surprises, je ne me voyais pas réaliser cet effet en full CSS haha Smiley lol

Merci de vos retours ça correspond tout à fait à ce que je recherchais Smiley smile
Sujet clos
Aller à