Réaliser un background animé avec HTML5 et CSS3

Voici un petit code qui va vous permettre, en utilisant la propriété @-keyframes, d'intégrer dans votre site un fond animé, que ce soit dans une balise ou en background général.
Ce code demande quelques notions de CSS que vous arriverez surement à décrypter sans difficulté.

Une petite remarque mais non sans importance, la propriété "@-keyframes" n'est pas pris en charge par Internet Explorer 9 et ses versions antérieures.
Cette application sera donc réservée aux navigateurs Firefox, Opera et autres ... .

Ces articles sont susceptibles de vous intéresser aussi :

Un système d'onglets avec JQuery

Portfolio HTML5 / CSS3 et JQuery

Coder en HTML

 

Ce que nous allons réaliser

 

Voir l'animation en plein écran

 

Preparation

Pour réaliser cette animation il vous faudra dans un premier temps préparer votre structure et vos images.
Pour cet exemple j'ai défini une <div> conteneur (qui peut etre le "body" de votre page si vous souhaitez en faire le fond général de votre site web) dans lequel se trouve 5 images au format .png chacune insérée comme "background-image" dans leur <div> respective.
Mes balises sont simplement placée les unes en dessous des autres mais cette disposition est totalement modifiable selon le résultat final attendu.
Chaque <div> animée se voit ensuite attribuée une règle CSS propre définissant, en autre, le temps et le sens de son animation et le "z-index" permettant de les placer en arrière plan du conteneur de site.

J'intègre ensuite une règle CSS qui définira le conteneur du site web en lui attribuant un positionnement "absolute", afin de pouvoir le placer en haut de page et au centre, ainsi qu'un "z-index" élévé lui assurant une présence au premier plan.

J'intègre ensuite la propriété @-keyframe en lui intégrant une dénomination, ici "anim", qui est ensuite reportée dans les
"class" des éléments animés.

 

Mais trève de bavardage, le code sera plus parlant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

#fond{
padding: 50px 0px; /*on decale l'animation du haut de page*/
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
position: relative;
z-index:1; /*on défini un z-index pour la visibilité du site au premier plan*/
}

/*definition du temps et direction d'animation, definition des dimensions de la balise <div> */
.img1 {
width:245px;/*la balise est au meme dimensions que son image de fond*/
height:86px;
-webkit-animation: anim 7s linear infinite;
-moz-animation: anim 7s linear infinite;
-o-animation: anim 7s linear infinite;
background-image: url(votre_image1.png);
position: relative;
z-index:2;
}

.img2 {
width:133px;
height:67px;
background-size:133px 67px;
opacity: 0.6;
-webkit-animation: anim 12s linear infinite;
-moz-animation: anim 12s linear infinite;
-o-animation: anim 12s linear infinite;
background-image: url(votre_image2.png);
position: relative;
z-index:3;
}

.img3 {
width:150px;
height:122px;
opacity: 0.8;
-webkit-animation: anim 10s linear infinite;
-moz-animation: anim 10s linear infinite;
-o-animation: anim 10s linear infinite;
background-image: url(votre_image3.png);
position: relative;
z-index:4;
}

.img4 {
width:190px;
height:100px;
opacity: 0.75;
-webkit-animation: anim 9s linear infinite;
-moz-animation: anim 9s linear infinite;
-o-animation: anim 9s linear infinite;
background-image: url(votre_image4.png);
position: relative;
z-index:5;
}

.img5 {
width:150px;
height:122px;
opacity: 0.8;
-webkit-animation: anim 8s linear infinite;
-moz-animation: anim 8s linear infinite;
-o-animation: anim 8s linear infinite;
background-image: url(votre_image5.png);
position: relative;
z-index:6;
}

#lesite {
width:850px;/*largeur du conteneur du site*/
height:auto;
left:50%;/*on place un point d'alignement du conteneur au centre de la fenetre du navigateur*/
margin-left: -425px;/*on centre le site en soustrayant la moitié de la largeur du conteneur au point défini par la propriété de placement "left"*/
top:0px;/*on place le site en haut de la fenetre du navigateur*/
background-color:blue;
position:absolute;
z-index: 10;/* on place le conteneur du site au premier plan par le z-index le plus élevé*/
}

/*on integre la propriete CSS3 d'animation*/
@-webkit-keyframes anim {
/*valeur basées sur l'élément conteneur de l'animation ... */
0% {margin-left: 650px;} /*marge representant le point de départ de l'animation*/
100% {margin-left: 0px;} /*marge representant la fin de l'animation pour une reprise au point de depart*/
}
/*pour info l'animation en plein ecran à pour valeur 0% {margin-left: 1300px;} et {100% {margin-left: -300px;}*/

@-moz-keyframes anim {
0% {margin-left: 650px;}
100% {margin-left: 0px;}
}
@-o-keyframes anim {
0% {margin-left: 650px;}
100% {margin-left: 0px;}
}

</style>

</head>

<body style="margin:0px;"> <!-- On évite d'avoir une petite bordure-->

<!-- NOTRE ANIMATION DE FOND -->
<div id="fond">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
<div class="img5"></div>
</div>
<!-- FIN DE NOTRE ANIMATION DE FOND -->

<!-- NOTRE CONTENEUR DE SITE-->
<div id="lesite">
<p>&nbsp;</p> <!-- quelques paragraphe pour que le conteneur soit visible en cas de copier-coller-->
<p>&nbsp;</p>
<p>&nbsp;</p>le site se trouvera ici
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<!-- FIN DE NOTRE CONTENEUR DE SITE-->

</body>
</html>

 

Pour finir

Amusez vous bien avec cette petite animation !