Bonjour,

J'ai un petit soucis dans l'animation de mes colonnes.
Je me suis fais la function ci dessous (je la lance toute les 20 sec), mais seul le premier deplacement fonctionne.
Ensuite les colonnes reviennent en position d'origine. Il faudrait qu'une fois le deplacement fini je mette a jour la position de la div.
En gros je veux faire: col1 | col2 | col3 => col2 | col3 | col1 => col3 | col1 | col2 ainsi de suite.

Merci pour vos astuces.

Code php

Code PHP : 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
 function myMove() {
    		var elem = document.getElementById("col1"); // selection des divs
	    	var elem1 = document.getElementById("col2");
	    	var elem2 = document.getElementById("col3");
	    	var speed1 = 0; //initialisation des variables de deplacement
	    	var speed2 = 0;
	    	var id = setInterval(frame,2);
	    	function frame(){
	    		if (speed1==(-916)) { //Si on atteind la position souhaite
	    			clearInterval(id);
    				elem1.setAttribute('id', 'col1'); // on change l'id de la div de facon a ce que le prochain movement soit le bon
    				elem2.setAttribute('id', 'col2');
    				elem.setAttribute('id', 'col3');
	    		} else  {
	    			speed1 = speed1 -2; //decrement pour que les colonnes 2 et 3 partent vers la gauche
	    			speed2 = speed2 +4; //increment pour que la colonne 1 partent tout a droite
	    			elem1.style.left = speed1 + 'px';
	    			elem2.style.left = speed1 + 'px';
	    			elem.style.left = speed2 + 'px';
				}
	    	}
        }

code html du genre

Code HTML : 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
<div class="container">
 
  <div class="row">
 
    <div id="col1" class="col-md-4 machine_type_column">
      bloc 1
    </div>
 
    <div id="col2" class="col-md-4 machine_type_column">
      bloc 2
    </div>
 
    <div id="col3" class="col-md-4 machine_type_column">
      bloc 3
    </div>
 
  </div>
 
</div>

Code css

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
body {
  background-color: grey;
  width: 150%;
}
.machine_type_column {
  padding: 5px 10px;
}