Termes CSS clés employés : :background-position, animation.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari
avec préfixe, Opera12.1+.
Combiner plusieurs arrière-plans et les animer de façon différentielle.
CSS autorise la définition de plusieurs images d’arrière-plan pour un même élément. Une animation va modifier graduellement la position relative de chaque image d’arrière-plan. Les deux images d’avant-plan sont au format .png, de façon à posséder un arrière-plan transparent. Vous pourriez aussi employer des images de type clip-art au format gif, également dotée de transparence d’arrière-plan.
La première étape consiste à définir les images retenues et à les retravailler si nécessaires afin de
les mettre dans le bon format : un sujet qui dépasse le thème de ce tutoriel. Pour obtenir un effet
agréable, vos images ne doivent pas présenter de discontinuités sur les bords, de façon à pouvoir
se répéter de façon non évidente (la répétition est le comportement par défaut d’une image d’arrière-
plan).
Le code HTML est primaire :
<div class="conteneur"></div>
Le code CSS est à peine plus complexe : vous définissez la taille du div conteneur, en définissant trois
images d’arrière-plan, dont vous fixez la position.
div.conteneur {
width:352px;
height:140px;
margin:20px auto 20px;
background-image: url(ciel2.png),
url(ciel3.png),
url(cielfond.png);
background-position: 0px 0px,
0px 0px,
top left;
}
Vous définissez ensuite une animation en cas de survol de l’élément par le pointeur. Elle est ici assez
lente, de type linéaire et se répète à l’infini.
div.conteneur:hover {animation: fondanim 15s linear infinite}
Et vous définissez l’animation elle-même, qui joue sur la position des images d’arrière-plan.
La dernière image reste fixe (top left), la première se déplace de 351 pixels et la seconde de 702
pixels : elle semblera donc se déplacer deux fois plus vite. Le décalage est supérieur à la largeur
des images, mais la propriété background-repeat étant par défaut fixée à repeat cela est sans
importance : elles défileront en se répétant.
@keyframes fondanim{
from { background-position: 0px 0px, 0px 0px, top left; }
to { background-position: 351px 0px, 702px 0px, top left;}
}
|
|---|