28106 sujets

CSS et mise en forme, CSS3

bonjour
J'ai un bon de commande que je souhaite améliorer lorsque j'ajoute un article à mon panier, Lorsque je clic sur ajouter au panier on voit l'article aller au panier
Mais je trouve qu'il y va trop vite
Comment je pourrais diminuer la vitesse ?
je souhaiterais aussi que lorsque j'ajoute un article au panier que le panier puisse vibrer

Merci beaucoup pour l'aide que je cherchais depuis longtemps

Je vous donne le lien codpen avec mon projet reduit au minimum

https://codepen.io/flexi2202/pen/eYrKOJR
Modifié par flexi2202 (03 Oct 2022 - 12:33)
Modérateur
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)
Meilleure solution
bonjour
un super tres grand merci pour la réponse
les codes et la solution
c 'est super génial cela fonctionne

encore mille fois merci
Modifié par flexi2202 (03 Oct 2022 - 15:28)
voila je viens de remettre l'ensemble dans mon code principal et cela fonctionne du tonnerre

encore mille fois merci

bonne apres midi