Chapitre 5
Manipulation d'images
Retour Accueil CSS
45 Apparition.
Termes CSS clés employés : border-radius, animation, transform:rotate, box-shadow.
Compatibilité navigateurs : IE10+, Firefox16.0+, Chrome et Safari avec préfixe, Opera12.1+.
Problématique
Créer un effet d’arrivée spectaculaire d’une image.
Résolution théorique
Cela impose le recours à une animation.
Résolution pratique
La structure HTML se compose d’un DIV conteneur renfermant un code explicatif, puis un DIV qui contient l’image et sa légende. L’action sera appliquée au deuxième DIV.
<DIV class="texte">
<SPAN>Survolez avec votre pointeur pour faire apparaître l'image</SPAN>
<DIV class="image">
<IMG src="adresse_image" width="largeur image">
<P class="legende">légende image</P>
</DIV>
</DIV>
Les définitions CSS du premier DIV et de son texte explicatif sont classiques :
div.texte {
position: relative;
float:left;
height:70px;
width:220px;
border:3px solid grey;
border-radius:25px;
background:white;
}
.texte SPAN {
display:inline-block;
position:relative;
margin-left: 5px;
height:70px;
width:200px;
padding: 5px;
text-align:center;
}
Il en va de même de l’image, si ce n’est que celle-ci est positionnée 2000 pixels à droite (en dehors de l’écran).
.texte img {margin:5px auto 5px;}
.texte .image {
position: relative;
float:left;
margin-top:-75px;
padding:25px;
align:center;
width:500px;
left: 2000px;
border:1px solid black;
background:white;
}
Il est ensuite défini les caractéristiques finales du conteneur de l’image (et de sa légende) en lui affectant une animation :
div.texte:hover .image {left:300px;
box-shadow:5px 5px 2px grey;
transform: rotate(-2deg);
animation: apparition 8s linear;
}
En, l’animation proprement dite est définie : l’image doit arriver de la droite, rebondir sur le texte de gauche, puis se balancer un peu avant d’atteindre sa position définitive. L’ombre portée est progressivement modifiée pour accentuer l’effet de mouvement.
@keyframes apparition{
0% {transform: rotate(-2deg); left:2000px; box-shadow:105px 0px 65px grey;}
5% {transform: rotate(-2deg);left:1500px; box-shadow:95px 0px 45px grey;}
10% {transform: rotate(-2deg);left:700px; box-shadow:85px 0px 35px grey;}
15% {transform: rotate(-2deg);left:350px; box-shadow:75px 0px 25px grey;}
16% {transform: rotate(-2deg);left:250px; box-shadow:65px 0px 15px grey;}
17% {left:300px; transform: rotate(10deg); box-shadow:55px 0px 10px grey;}
19% { transform: rotate(-9deg); box-shadow:45px 0px 5px grey;}
21% { transform: rotate(8deg); box-shadow:25px 0px 4px grey;}
23% { transform: rotate(-7deg); box-shadow:10px 0px 3px grey;}
25% { transform: rotate(6deg); box-shadow:5px 0px 2px grey;}
27% { transform: rotate(-5deg); }
29% { transform: rotate(4deg); }
31% { transform: rotate(-3deg); }
33% { transform: rotate(2deg); }
35% { transform: rotate(-2deg); }
100% { transform: rotate(-2deg); }
}
Apparition
Guerriers des morts version métal, avec le roi des morts monté (conversion)
Là encore, il est possible de compliquer les choses, par exemple en faisant apparaître de façon distincte les trois éléments de l’image : le cadre, l’image proprement dite, et la légende.
Le code HTML reste totalement inchangé : tout se fait au niveau du code CSS. Nous commençons par modifier légèrement le code de l’élément IMG et ajoutons du code pour la légende.
.texte IMG {
…
position:relative;
width:500px;
}
P.legende {position:relative;
top:-100px;
border-radius: 10px;
border:1px solid black;
background:linear-gradient( 30deg, rgba(175, 144, 4, 1.0), rgba(249, 254, 190, 1.0));
}
Le code du div de classe image ne change pas, mais nous ajoutons du code pour l’image elle-même et pour la légende.
div.texte:hover IMG {
top:0px;
left:0px;
width:500px;
animation: apparition2 8s linear;
}
div.texte:hover P.legende {
left:0px;
top:0px;
box-shadow:5px 5px 2px #aaaaaa;
animation: apparition3 8s linear;
}
Le code de l’animation du DIV conteneur (image) ne change pas, mais nous ajoutons les deux autres animations. Les éléments étant positionnés de façon relative, toute modification apportée à leur parent doit être prise en compte, ce qui explique certaines valeurs :
@keyframes apparition2{ /*animation de l’image elle-même */
0% {left:-1120px; top:800px; box-shadow:0px 105px 65px grey;}
10% {left:-420px; top:400px; box-shadow:0 px 65px 15px grey;}
15% {left:-70px; top:0px; box-shadow:0 px 65px 15px grey;}
21% { left:0px; box-shadow:0px 55px 10px grey;}
22% { box-shadow:0px 45px 5px grey;}
23% { box-shadow:0px 0px 0px grey;}
100% { box-shadow:0px 0px 0px grey;}
}
@keyframes apparition3{ /* animation de la légende */
0% {left:-4000px; top:-1000px; box-shadow:-105px 0px 65px grey;}
10% {left:-1000px; top:-300px; box-shadow:-105px 0px 65px grey;}
18% {left:-10px; top:-50px; box-shadow:-55px 0px 10px grey;}
20% {left:0px; top:0px; box-shadow:5px 5px 2px grey;}
100% {top:0px; box-shadow:5px 5px 2px grey;}
}
Les trois éléments apparaissent maintenant de façon distincte.
Apparition (II)
Guerriers des morts version métal, avec le roi des morts monté (conversion)
Retour Accueil CSS
|
|
|---|