Souscrire
Blog iamvdo.meVoici une animation très simple à réaliser !
Préparation
Pour cette démo, nous avons besoin de 3 images :
- l’icone
- le reflet
- l’ombre
(PS : J’ai fais le choix de créer 3 div et d’utiliser les images en background CSS, mais il est tout à fait possible d’utiliser la balise img)
Voici le code HTML :
<div id="ical">
</div>
<div id="icalr">
</div>
<div id="icalo">
</div>Tout d’abord, on positionne les 3 divs :
div{
position:absolute;
}
#ical{
width:64px;
height:65px;
top:106px;
left:259px;
z-index:5;
background:url('ical.png');
}
#icalr{
width:60px;
height:20px;
top:167px;
left:263px;
z-index:5;
background:url('icalr.png');
}
#icalo{
width:63px;
height:28px;
top:142px;
left:257px;
z-index:3;
background:url('icalo.png');
}Chaque div est dimensionnée (avec width et height), positionnée (avec top et left) et reçoit une image en background. Le z-index nous permet de gérer l’ordre d’empilement.
Les animations
Enfin, il suffit de créer trois animations différentes pour les effets de rebond. ( sachant que deux animations seront quasiment identique ) Voici le code de la première animation (pour firefox) :
#ical{
...
-moz-animation:bounce 0.7s linear infinite;
}
@-moz-keyframes bounce{
from{top:106px;}
10%{top:99px;}
20%{top:93px;}
30%{top:89px;}
40%{top:87px;}
50%{top:86px;}
60%{top:87px;}
70%{top:89px;}
80%{top:93px;}
90%{top:99px;}
to{top:106px;}
}On remarque ici que l’animation agit sur la valeur top de la div. Cette valeur commencera à 106px ( valeur du placement initial en CSS ) et finira à cette même valeur mais en oscillant de 20px au maximum ( à 50% de l’animation )
Comment calculer les valeurs en px ?
Pour une animation réussie, ne passez pas votre temps à tâtonner pour chercher les valeurs à utiliser, mais calculez-les !
Pour cela choisissez tout d’abord le type d’animation et dessinez la courbe. Dans le cas de cette démo, j’ai choisi une courbe de type y=x² : elle est représentée en vert sur le graphique.
Cette courbe représente la position top de l’image dans le temps, sachant que l’élévation maximale sera de 20px. Il nous faut donc calculer les valeurs pour les 5 points verts de l’image, correspondants aux valeurs 10%,20%,30%,40% et 50%.
Pour cela, aidons nous de la partie gauche du graphique. Nous la découpons en 5 parties également et pour chaque valeur, nous calculons son carré ( 1->1, 2->4, 3->9, 4->16, 5->25). Il nous suffit ensuite de faire un produit en croix pour connaitre les valeurs que l’on cherche.
Par exemple, pour la valeur 10%, je pars du carré de 4, soit 16. Je fais le produit en croix et j’obtiens (20x16)/25 = 12,8px !
La valeur de l’animation pour 10% est donc de 106px - (20-12,8) soit 99px ! Cette valeur est aussi celle de 90%.
Et ainsi de suite...
Besoin de plus de détails sur les animations
PS : Posez vos questions dans le forum de cet article, juste en dessous. Et n’oubliez pas de voter si l’article vous plait !
#1par Adrien, le 24 août 2011
Super tuto ! Effet à couper le souffle !
Merci ;)
#2par Blitz, le 5 janvier
Est-il possible de le faire avec seulement l’image ? ( Sans le reflet et l’ombre )
Je n’y arrive pas :/
#3par vive firefox10, le 14 janvier
Assez marrant
Je vais essayez d’améliorer ce script en essayant d’alterner celui qui bouge.
L’ombre sous l’image rendl’effet vraiment réaliste.
#4par Ced, le 16 janvier
Sympa !
Je m’étais amusé à faire la même mais en allant plus loin sur l’utilisation des pseudo classe permettant le reflet...
Je mettais l’image dans le content sur la pseudo classe :after et via la prop transform via scale en Y négatif + une opacité moindre permet d’avoir le reflet. Ce qui permet de n’avoir qu’une div par icone.
Le problème, c’est que seul Firefox permet de jouer une animation sur l’element virtuel "after" (ou alors je n’ai pas trouvé comment sur les autres). Du coup, le reflet part dans le mauvais sens sous Chrome et consort...
De plus, je n’ai pas l’ombré non plus (peut être qu’avec les filter cela sera possible...)
le code :
.icon::after {content: url(monimage.png);
display: block;
position: absolute;
top: XXpx;
height: XXpx;
width: XXpx;
opacity: 0.3;
-moz-transform: scaleY(-0.7);
-webkit-transform: scaleY(-0.7);
-o-transform: scaleY(-0.7);
}
en pratique : http://cedricrey.fr/atelierWeb/CSSd...
Le rendu est évidement bien meilleur sur votre démo !
Je me permets de reprendre vos valeurs pour le timing, car même si mes cours de physiques ne sont pas très loin, j’ai eu la flemme de calculer et l’effet de l’animation est désastreux sur ma page...
En tous cas chapeau pour votre démo !!!
#5par css3create, le 16 janvier
@Ced : Bravo ! Très bonne idée... même si c’est vrai que les transitions et animations sur les pseudo-éléments ne fonctionne qu’avec Firefox. Bientot sur les autres navigateurs ?
Vincent
PS : Je me suis permis d’ajouter les balises <code> pour plus de clarté.
#6par paline, le 11 février
super ! mais je n arrive pas à l installer :/
#7par zakariadza, le 16 mai
En fait, l’équation de la courbe n’est pas y=x^2 mais y=-x^2.
Merci pour le tuto en tout cas :p