Sujet Précédent Sujet Suivant

Comment ajouter un effet animation-duration

Résolu/Fermé
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 3 oct. 2022 à 08:26
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 10 oct. 2022 à 11:30

bonjour a tous

après avoir trouve mon bonheur avec un code tout fait je souhaiterais pouvoir lui ajouter une animation-duration

Pour l'instant le code fonctionne parfaitement 

Lorsque je clic sur ajouter au panier on voit parfaitement bien l'objet se déplacer vers le panier 

Mais il se déplace trop rapidement 

j'ai bien tente d'essayer d'ajouter une animation-duration lorsque on clic sur ajouter au panier 

mais cela n'a eu aucun effet voici le code complet

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Nice Move To Cart Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="b-cart">Cart (<span class="b-cart__count">0</span>)</div>

<ul class="b-items">
  <li class="b-items__item">
    <a href="#">
      <img class="b-items__item__img" src="http://fakeimg.pl/200x200/?text=World&font=lobster" alt="" />
      <span class="b-items__item__title">Product 8</span>
    </a>
    <a href="#" class="b-items__item__add-to-cart">Add to cart</a>
  </li>
</ul>
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
var cart = $('.b-cart'),
    cartCountCont = cart.find('.b-cart__count'),
    cartCount = parseInt(cartCountCont.text(), 10),
    addToCart = $('.b-items__item__add-to-cart');

addToCart.on('click', function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  
  var el = $(this),
      item = el.parent(),
      img = item.find('.b-items__item__img'),
      cartTopOffset = cart.offset().top - item.offset().top,
      cartLeftOffset = cart.offset().left - item.offset().left;
  
  var flyingImg = $('<img class="b-flying-img">');
  flyingImg.attr('src', img.attr('src'));
  flyingImg.css('width', '200').css('height', '200');

  cartCount += 1;

 flyingImg.animate({
    top: cartTopOffset,
    left: cartLeftOffset,
    width: 50,
    height: 50,
    opacity: 0.1
  }, 800, function () {
    flyingImg.remove();
    cartCountCont.text(cartCount);
  });
  
  el.parent().append(flyingImg);
});
.b-cart {
  width: 150px;
  height: 37px;
  background: #E74C3C;
  color: #fff;
  text-align: center;
  font-family: "Helvetica Neue";
  font-size: 21px;
  padding-top: 13px;
  border-bottom: 3px solid #d83d2d;
  border-radius: 4px;
  margin-left: 13px;
}
.b-cart:hover {
  opacity: 0.8;
}
.b-items {
  margin: 100px 0 0 0;
  padding: 0;
}
.b-items .b-items__item {
  display: inline-block;
  border: 1px solid #eee;
  width: 200px;
  position: relative;
  border-radius: 4px;
  margin: 0 12px 21px 12px;
}
.b-items .b-items__item .b-items__item__img {
  border-radius: 4px 4px 0 0;
}
.b-items .b-items__item a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.b-items .b-items__item a:hover {
  opacity: 0.8;
}
.b-items .b-items__item__title {
  display: block;
  font-size: 18px;
  margin-top: 9px;
  font-family: "Helvetica Neue";
  color: #95A5A6;
}
.b-items .b-items__item__add-to-cart {
  font-family: "Helvetica Neue";
  display: block;
  background: #16A085;
  color: #fff;
  margin-top: 9px;
  padding: 12px 0;
  border-radius: 0 0 4px 4px;
  border-bottom: 2px solid #0a9479;
}
.b-flying-img {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  z-index: 5;
  animation: fly 0.8s 1;
  -webkit-animation: fly 0.8s 1;
  -webkit-backface-visibility: hidden;
}
@keyframes fly {
  0% {
    -moz-transform: rotate(0deg);
    /* Для Firefox */
    -ms-transform: rotate(0deg);
    /* Для IE */
    -o-transform: rotate(0deg);
    /* Для Opera */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    /* Для Firefox */
    -ms-transform: rotate(360deg);
    /* Для IE */
    -o-transform: rotate(360deg);
    /* Для Opera */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fly {
  0% {
    -webkit-transform: rotate(0deg);
    /* Для Safari, Chrome, iOS */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Для Safari, Chrome, iOS */
  }
}
A voir également:

1 réponse

Réponse 1 / 1
Pollux
3 oct. 2022 à 21:05

Salut,

si vous parlez de la propriété CSS il suffit de regarder la notice:

https://developer.mozilla.org/fr/docs/Web/CSS/animation-duration

Pour apprendre à utiliser les animations il serait plus pratique de faire ça dans un fichier à part histoire de pas mélanger avec du code déjà existant et bien comprendre le(s) principes en eux même. Suivre un cours précis sur l'animation CSS peut aider aussi, ensuite vous avez compris vous pouvez facilement intégré ce que vous voulez au reste.

https://www.w3schools.com/css/css3_animations.asp
1
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 187
10 oct. 2022 à 11:30

salut 

Merci de l'aide 

j'ai fini par trouver

0

Discussions similaires

comment animer une soirée avec 30 personnes à table ?
sofi -
Nolly94 -

1 réponse