Termes CSS clés employés : transform, animation.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari avec préfixe, Opera12.1+.
Obtenir un effet de déplacement grâce à des animations différentielles sur plusieurs plans de profondeur.
Nous pourrions employer le même principe que dans l’exemple précédent, qui donne déjà cet effet de profondeur. Il va être ici préféré de jouer sur la taille affichée des éléments, à l’aide d’une animation. Comme d’habitude, le déclenchement sera effectué à l’aide de la peudo-classe :hover.
Le code HTML ne présente aucune difficulté : un conteneur général, un élément qui sera doté d’une image d’arrière-plan et d’un enfant renfermant du texte.
<IV class="conteneur">
<DIV class="fond">
<DIV class="contenu">Perdu dans<BR />l'espace...</DIV>
</DIV>
</DIV>
Le code CSS débute par la définition du conteneur. Le seul point important est la propriété overflow, fixée à hidden : l’élément enfant ne pourra excéder les marges du conteneur.
DIV.conteneur {
width:200px;
height:200px;
margin:20px auto 20px;
overflow:hidden;
}
Le fond, de même taille que son parent, se voit attribuer une image d’arrière-plan.
DIV.fond {
width:200px;
height:200px;
align:center;
vertical-align:center;
background-image:url("space.jpg");
}
L’élément enfant contenu est un peu plus subtil : il est défini comme de très petite taille, avec des marges exprimées en pourcentage, et avec une très faible taille de police et d’interligne : en pratique, il est invisible en l’état.
DIV.contenu {
position:absolute;
margin-left: 53%;
margin-top:53%;
width:2px;
height:2px;
color:white;
font-size:.5px;
line-height:.5px;
}
On définit ensuite deux animations, une sur le fond et une sur le contenu.
div.conteneur:hover DIV.fond {animation: parallaxeT 5s infinite;}
div.conteneur:hover DIV.contenu {animation: parallaxeC 5s infinite;}
L’animation du fond augmente sa taille par 3. Souvenez-vous que, comme la propriété overflow du parent est fixée hidden, la partie affichée du fond restera toujours dans les limites du conteneur.
@keyframes parallaxeT{
from { transform:scale(1, 1); }
to { transform:scale(3, 3);}
}
Le contenu voit en revanche sa taille augmenter 25 fois…
@keyframes parallaxeC{
from { transform:scale(1, 1);}
to { transform:scale(25, 25);}
}
Si cette méthode fonctionne, elle présente l’inconvénient (relatif) d’avoir recours à la méthode transform, non reconnue par tous les navigateurs. Voici une variante plus universelle, calquée sur la précédente. Le conteneur reste inchangé. On ajoute simplement à l’élément fond les propriétés background-position:center et overflow:hidden :
DIV.fond {
…
background-position:center;
overflow:hidden;
}
On modifie les marges et la taille de l’élément contenu, en lui ajoutant la propriété overflow :hidden :
DIV.contenu {
…
margin-left: 8%;
margin-top:8%;
width:180px;
height:180px;
…
overflow:hidden;
}
Enfin, les animations jouent désormais respectivement sur la taille de l’arrière-plan du fond et la taille de police et d’interlignage et les marges de l’élément contenu, pour un résultat analogue au précédent :
@keyframes parallaxeT{
from { background-size:100% 100%; }
to { background-size:300% 300%;}
}
@keyframes parallaxeC{
from { font-size:.5px;
line-height:.5px;
}
to { font-size:40px;
line-height:40px;
margin-left:10px;
margin-top:60px;
}
|
|---|