Termes CSS clés employés : ransform, animation.
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et
Safari avec le préfixe -webkit-, Opera12.1+..
Créer un générique défilant de type type « Guerre des étoiles ».
Pour obtenir l’effet de défilement avec rétrécissement progressif de taille, il faut recourir à un basculement de l’élément autour de l’axe horizontal, pour donner la profondeur. Le défilement lui-même sera obtenu à l’aide d’une animation. Le texte du générique (ainsi que le titre) sont placés sur une image (ici .gif) de très haute taille qui va être affectée comme image d’arrière plan.
Attention : cet exemple est un de ceux qui ne supportent que très mal un affichage sur un écran de faible largeur. Le conteneur doit impérativement être de taille fixe pour que cela fonctionne.
Le code HTML ne présente aucune difficulté : un conteneur général, puis un élément doté d’une image
d’arrière-plan.
<div class=conteneur>
<div id=gen></div>
</div>
Le code CSS débute par la définition du conteneur. Rien d’extraordinaire, sinon la définition de
overflow:hidden afin d’éviter tout débordement hors de « l’écran ».
div.conteneur {
display:block;
margin : 2px auto 2px;
padding:5px;
width:860px;
height:500px;
align:center;
vertical-align:center;
border:2px solid black;
background-color:black;
overflow:hidden;
}
Le div du générique proprement dit possède une largeur inférieure à celle du contenant, mais la même
hauteur. En raison de la transformation qui va lui être appliquée et qui va avoir pour effet de
« baisser » l’élément, il possède une marge supérieure négative. L’image d’arrière-plan est définie
comme non répétée, remplissant tout l’élément et possédant par défaut un décalage de 1250 pixels,
afin de n’afficher que du noir. Puis une animation lui est affectée.
div#gen {
margin : -120px auto 0px;
width: 550px;
height:500px;
background-image: url("texte_defilant.gif");
background-repeat:no-repeat;
background-size:100%;
background-position: 0px -1250px;
animation : img0 20s linear;
}
Enfin, l’animation elle-même. Elle débute par l’affichage fixe du titre (situé vers 150 pixels) pendant
1,2 secondes (6% de 20 secondes, la durée totale de l’animation).
@keyframes img0
{
from {background-position: 0 150px; /* intro ini */
transform:perspective(500px)
rotateX(0deg);}
5.99% {background-position: 0 150px;
transform:perspective(500px)
rotateX(0deg);}
…
}
Ensuite, l’élément pivote de 50° sur l’axe des X et voit sa taille augmentée de 20%, puis
l’arrière-plan défile progressivement de la position –280 pixels à –1200 pixels. Ces dimensions
dépendent bien évidemment de votre propre texte.
@keyframes img0
{
…
6% {background-position: 0 -280px;
transform:perspective(500px)
rotateX(50deg)
scale(1.2);} /*texte défilant */
to {background-position: 0 -1200px;
transform:perspective(500px)
rotateX(50deg) scale(1.2);
}
}
Dans l'exemple proposé ci-dessous, l'animation est déclenchée par le passage de la souris, et n'est
donc pas automatique : la partie animation : img0 20s linear; a été déplacée dans un nouvel
élément :hover :
div#gen:hover {
animation : img0 20s linear;
}
|
|---|