animation js
Posté : 13 mars 2020, 13:18
Bonjour tout le monde,
j'essaye d'animer deux vélos, le but c'est que dès que un disparaît l'autre apparaît sans fin, sauf quand on clique sur le bouton arrêter, mais c'est un vrai casse tête, si vous pouvez m'aider svp! voilà mon code:
code HTML:
code JS;
j'essaye d'animer deux vélos, le but c'est que dès que un disparaît l'autre apparaît sans fin, sauf quand on clique sur le bouton arrêter, mais c'est un vrai casse tête, si vous pouvez m'aider svp! voilà mon code:
code HTML:
Code : Tout sélectionner
<input type="button" id="demarrer" value="Démarrer">
<input type="hidden" id="arreter" value="Arrêter">
<div id="animation">
<div id="velo1">
<img class="roue-arriere" src="images/roue.png" alt="">
<img class="roue-avant" src="images/roue.png" alt="">
<img class="velo" src="images/velo.png" alt="">
</div>
<div id="velo2">
<img class="roue-arriere" src="images/roue.png" alt="">
<img class="roue-avant" src="images/roue.png" alt="">
<img class="velo" src="images/velo.png" alt="">
</div>
</div>
Code : Tout sélectionner
window.addEventListener("load", function(){
var animation = document.getElementById('animation');
var velo1 = document.getElementById('velo1');
var velo2 = document.getElementById('velo2');
velo2.setAttribute('style','left : -348px; visibility : visible');
velo1.style.border ="3px red solid";
velo2.style.border ="3px black solid";
var r_av = document.querySelector('.roue-avant');
var r_a = document.querySelector('.roue-arriere');
var r_av_velo2 = document.getElementsByClassName('roue-avant')[1];
var r_a_velo2 = document.getElementsByClassName('roue-arriere')[1];
var eDemarrer = document.getElementById("demarrer");
var eArreter = document.getElementById("arreter");
var direction="aDroite";
var i = 0;
var j=0;
var k = -348;
var largeur = document.body.offsetWidth;
var a= 0;
console.log(largeur);
function animation1(){
//la rotation du vélo un
i++;
velo1.style.left = i + 'px';
r_a.style.transform = "rotate(" + i + "deg)";
r_av.style.transform = "rotate(" + i + "deg)";
// si le velo un dépasse la largeur de l'écran, il disparaît progressivement
if (i + velo1.offsetWidth >= largeur){
velo1.style.clipPath = "inset( 0 " + j + "px 0 0 )";
j++;
//velo2.setAttribute('style','visibility : visible');
// rotation du vélo deux
velo2.style.left = k + 'px';
r_a_velo2.style.transform = "rotate(" + k + "deg)";
r_av_velo2.style.transform = "rotate(" + k + "deg)";
k++;
}
// si le vélo un est égale à la largeur de l ecran + 348(inset) le vélo recommence depuis le début
if(i+velo1.offsetWidth == largeur+348){
i=-348;
velo1.style.clipPath = "inset( 0 0 0 0 )";
}
if (k + velo2.offsetWidth >= largeur) {
velo2.style.clipPath = "inset( 0 " + a + "px 0 0)";
a++;
}
timerId = setTimeout(animation1, 10);
}
var timerId;
// les bouttons pour arrêter pou demarrer l'animation
eDemarrer.addEventListener("click", function () {
eDemarrer.type = "hidden";
timerId = setTimeout(animation1, 20);
eArreter.type = "button";
});
eArreter.addEventListener("click", function () {
eArreter.type = "hidden";
clearTimeout(timerId);
eDemarrer.type = "button";
});
});