Mise a jour de la position d'une div apres mouvement
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:
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:
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:
1
2
3
4
5
6
7
| body {
background-color: grey;
width: 150%;
}
.machine_type_column {
padding: 5px 10px;
} |
