Je cherchais à créer une animation pour panier en jquery avec la fonction animate/animate() pour les puristes ^^ pour que quand je clique sur un article celui ci se deplace jusqu’au dessus du panier. un peu comme ici
je ne voulais pas repomper un script déja existant alors j’ai décidé de créer mon script.
ce script permet de créer une animation vers le panier de l’utilisateur. Dès qu’il va cliquer sur un objet, un bloc va se déplacer jusqu’à son panier. Ceci est le résultat d’une animation javascript faite en jquery grace à la fonction animate(). on appelle ça dans le jargon un FLY TO BASKET.
on commence par le HTML:
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml »>
<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″ />
<script language= »javascript » src= »jquery-1.3.2.js »></script>
<script language= »javascript » src= »flyToBasket.js »></script>
<LINK rel= »stylesheet » type= »text/css » href= »style.css »><title>Vol au panier / fly to basket / tutoriel animate jquery</title>
</head><body>
<div id= »panier »></div>
<div id= »vitrine »>
<div id= »produit1″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit2″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit3″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit4″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit5″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit6″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit7″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit8″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit9″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit10″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit11″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
<div id= »produit12″ onclick= »moveToBasket(this.id) »><div id= »contenuProduit »></div></div>
</div>
</body>
</html>
donc ici tres simple on creer une div panier, une div vitrine qui va contenir tout nos objets, et dans chaque objets on va créer une div contenu produit, c’est elle qui se déplacera pendant l’animation.
passons maintenant au script css (totalement personnalisable)
@charset « utf-8 »;
/* CSS Document */#panier
{
position:absolute;
width:100px;
height:100px;
background-color:#00F;
margin-left:1000px;
margin-top:300px;
}
.produit
{
width:200px;
height:200px;
background-color:#0FC;
float:left;
margin-left:10px;
margin-top:10px;
}
#contenuProduit
{
position:absolute;
width:200px;
height:200px;
background-color:#0FC;
}
#move
{
position:absolute;
width:200px;
height:200px;
background-color:#FF0;
z-index:90;
}
#vitrine
{
width:1000px;
height:1000px;
}
si jusqu’à la vous avez tout bien copié dans le même dossier vous devez voir apparaitre ceci:
et voici enfin la partie la plus intéressante, le code jquery!
// JavaScript Document
function moveToBasket(id)
{
// ces deux variable serviront par la suite a stocke l’informatio nde la positio nde l’objet
// position1 prendra comem valeur gauche ou droite
// position2 prendra comme valeure haut ou bas
var position1= » »;
var position2= » »;
// on recupere le code html contenu dans la div produit
var html = $(« # »+id).html();
// on rajoute à ce même code une div move qui va bouger.
html2 = html+’‘;
// on attribue a la div de contenu produit sa nouvelle composition
$(« # »+id).html(html2);
// je récupère la position du panier
var positionPanier = $(« #panier »).offset();
// j’attribue la coordonné x du panier a une variable xPanier
var xPanier = positionPanier.left;
// j’attribue la coordonné Y du panier a une variable yPanier
var yPanier = positionPanier.top;
// je recupere la position du produit qui à été cliqué
var produit = $(« # »+id).offset();
// j’attribue la coordonné x du panier a une variable xPanier
var xProduit = produit.left;
// j’attribue la coordonné Y du panier a une variable yPanier
var yProduit = produit.top;
// on va determiner la position du produit par rapport au panier, en haut dessus dessous a gauche a droite.if(xPanier – xProduit < 0)
{
position1 = (xPanier – xProduit);
position1 = ‘-=’+(xPanier – xProduit)*(-1)+ »;
}
else
{
position1 = ‘+=’+(xPanier – xProduit)+ »;
}
if(yPanier – yProduit < 0)
{
position2 = ‘-=’+(yPanier – yProduit)*(-1)+ »;
}
else
{
position2 = ‘-=’+(yPanier – yProduit)*(-1)+ »;
}
$(« #move »).animate({ left: »+position1+ »,top: »+position2+ »,height:$(« #panier »).height(),width:$(« #panier »).width() }, « slow », function() {
$(« #move »).fadeIn(‘slow’,function(){$(« # »+id).html(html);});
// Animation complete.
});
}
Si tout se passe bien en cliquant sur les gros carré une animation jaune ira se loger dans le carré bleu fonce (le panier)
voila je suis ouvert a toute proposition si vous avez des remarques ou des améliorations , je cherche aussi à rajouter des effets de easeIn ou fade In mais pas réussis jusqu’à la. c’est donc la fin de ce tutoriel sur le « fly to basket »
Benjion's Blog : vous avez dit développement web ? 
Commentaires sur: "jquery animate fly to basket ou comment créer une animation jquery pour l’ajout d’article à votre panier" (1)
[…] n°10 : jquery animate fly to basket ou comment créer une animation jquery pour l’ajout d’arti… […]