Pour implémenter une animation parabolique d'articles vers le panier d'achat, le plugin fly.js pour jQuery est une solution efficace. Ce guide détaille son intégration et son utilisation.

Chargemant des bibliothèques

Commencez par inclure jQuery et le plugin fly.js dans votre document HTML :

<script src="jquery.min.js"></script>
<script src="jquery.fly.min.js"></script>

Structure HTML des produits

Voici un exemple de code pour afficher quatre articles avec leurs images, prix et boutons d'ajout au panier :

<div class="products-container">
  <div class="product-item">
    <img src="images/product1.jpg" alt="Chaussures">
    <h3>Prix : <span>259.00 €</span></h3>
    <p>Chaussures à talons en cuir pour femmes</p>
    <button class="add-to-cart">Ajouter au panier</button>
  </div>
  <div class="product-item">
    <img src="images/product2.jpg" alt="Manteau">
    <h3>Prix : <span>136.00 €</span></h3>
    <p>Manteau en laine pour couples</p>
    <button class="add-to-cart">Ajouter au panier</button>
  </div>
  <div class="product-item">
    <img src="images/product3.jpg" alt="Gilet">
    <h3>Prix : <span>728.00 €</span></h3>
    <p>Gilet rembourré pour sports d'hiver</p>
    <button class="add-to-cart">Ajouter au panier</button>
  </div>
  <div class="product-item">
    <img src="images/product4.jpg" alt="Veste">
    <h3>Prix : <span>119.00 €</span></h3>
    <p>Veste en lin minimaliste unisexe</p>
    <button class="add-to-cart">Ajouter au panier</button>
  </div>
</div>

Script jQuery pour l'animation

L'objectif est de faire voler l'image du produit vers l'icône du panier lors du clic, en suivant une trajectoire parabolique. Le plugin gère l'animation une fois les coordonnées de départ et d'arrivée définies.

$(document).ready(function() {
  const panierIcone = $('#cart-icon');
  const panierPosition = panierIcone.offset();

  $('.add-to-cart').on('click', function(evenement) {
    const imageSrc = $(this).closest('.product-item').find('img').attr('src');
    const elementAnime = $('<img class="element-volant" src="' + imageSrc + '">');

    elementAnime.fly({
      start: {
        left: evenement.pageX,
        top: evenement.pageY
      },
      end: {
        left: panierPosition.left + 15,
        top: panierPosition.top + 15
      },
      onEnd: function() {
        $('#notification').fadeIn().animate({ width: '200px' }, 300).fadeOut(500);
        this.destroy();
      }
    });
  });
});

Compatibilité avec les anceins navigateurs

Pour une compatibilité avec Internet Explorer versions antérieures à 10, ajoutez le fichier polyfill requestAnimationFrame.js avant les autres scripts :

<script src="requestAnimationFrame.js"></script>

La documentation complète et les exemples du plugin sont disponibles sur le dépôt GitHub officiel : https://github.com/amibug/fly.