[Résolu] Comment faire vibrer mon panier lors d'ajout d'un article

Bonjour,

Pour faire vibrer le panier. une solution est d'ajouter une class au conteneur de ton panier au moment ou l'image est retirée dans ta fonction.

En javascript il te faut cibler le conteneur (ajout d'un id au conteneur nécessaire pour la clarté du code et de son fonctionnement):
html ligne 39

<div class="container" id="bucket">

let bucket = document.querySelector('#bucket') ; 

ajout d'une class juste aprés le moment ou l'image est retirée (ligne 23 flyingImg.remove(); )

bucket.classList.add('shake')

on enlève la class (au click ligne 6) si présente pour relancé son animation plus loin

 bucket.classList.remove('shake')

Coté CSS, on créer un sélecteur et une animation que l'on lie.

.shake {
  animation:shake 0.21s 5 ease-in-out alternate ;/* reglage durée et repetition de l'animation ici */
}
@keyframes shake{  /* reglage de l'animation ici */
  25% {rotate:-5deg;}
  75% {rotate:5deg}

}

Pour la durée de rotation de l'image , c'est dans le CSS ligne : 69-70

animation:fly 0.8s 1;
  -webkit-animation:fly 0.8s 1;

et pour le deplacement de l'image, c'est dans le javascript ligne 22

}, 8000, function () {

Ici 8 secondes

Fork de ton codepen avec les modifs ci-dessus https://codepen.io/gc-nomade/pen/RwyJNMB

cdt
Modifié par gcyrillus (03 Oct 2022 - 15:15)