Discussion :

[Floflo18]

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;
}

[Invité]

Bonjour,

sans les codes HTML / CSS associés, on ne peut pas tester.
sans commentaires dans ton code, non plus.


N.B. Pour info, là, tu es dans le forum CSS....

[Floflo18]

J'ai des soucis pour répondre avec le pc du taff, j'ai modifié mon premier message pour mettre mon code HTML et CSS.

Si je n'ai pas bien exprimé mon soucis, c'est que je veux sauvegarder la position de ma div après avoir fais mon premier déplacement de façon à ce que le suivant deplacement soit bon.

[NoSmoking]

Bonjour,
ta démarche me paraît bien compliquée (échange d'ID entre autres)

Pour tous tes éléments

- Lecture position actuelle élément
- position suivante égale position actuelle plus distance
- Déplacement jusqu'à position suivante

... et on peut recommencer.

enfin peut être pas tous compris

[Invité]

Bonjour,

Si tu ne veux pas t'embêter à coder ça, il existe des sliders (jQuery ou autres) qui font très bien le job, et bien plus :

• slick slider
• FlexSlider 2
• bxSlider
• ...

N.B. Ca peut se faire aussi en pur CSS (mais ça devient plus fastidieux si on change le nombre de slides).

[Floflo18]

J'ai finalement trouver la solution en passant la definition des column dans le css en position absolute.
Suffisait ensuite de determiner les positions quand on a aucun movement.
Merci quand meme pour vos commentaires.