L’intégration d’un arrière-plan animé à votre site web ou application est une excellente façon de personnaliser le design et de le rendre plus attrayant. Ces arrière-plans originaux ont le potentiel de susciter l’émotion et d’améliorer l’expérience utilisateur globale.
Il existe de nombreuses approches pour concevoir un fond animé pour votre application, mais une combinaison simple de HTML et CSS s’avère particulièrement efficace. Cet exemple vous guidera à travers le code et vous permettra de visualiser une démonstration en direct du rendu final.
Établir la structure HTML
Nous allons créer un arrière-plan de couleur bleue agrémenté de bulles qui grossissent et flottent vers le haut. Vous pouvez observer le résultat final sur ce Codepen.
Débutez en créant une section avec la classe « wrapper » qui servira de conteneur pour l’animation.
Ensuite, créez dix éléments div, chacun représentant une bulle. À l’intérieur de chaque div, insérez un élément span doté de la classe « dot ». Si vous êtes novice en HTML, vous pouvez apprendre les bases essentielles de ces balises en seulement 10 minutes.
<body>
<section class="wrapper">
<h1>Arrière-plan Animé</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Mise en forme avec le code CSS
Il est possible de créer des arrière-plans visuellement impressionnants en utilisant uniquement du HTML. Cependant, pour ce projet, nous allons employer le CSS pour styliser et animer notre fond.
Tout d’abord, nous allons mettre les marges et les espacements à zéro pour nous assurer qu’il n’y ait aucun espace indésirable autour de l’arrière-plan.
* {
margin: 0;
padding: 0;
}
Ensuite, nous allons styliser la section parente en utilisant la classe « wrapper ». Cette section occupera 100 % de la largeur et de la hauteur de la page. Nous allons lui assigner une couleur de fond bleu et la positionner de manière absolue.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Nous allons également styliser le titre H1 avec une position absolue. Pour le centrer parfaitement, nous allons commencer par le positionner à 50 % du haut et du gauche. Ensuite, nous allons utiliser une translation pour le déplacer vers le haut et vers la gauche, afin de le placer exactement au centre.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
Passons maintenant au stylisation des divs qui prendront la forme de cercles pour simuler des bulles animées. Nous allons définir la hauteur, la largeur et la bordure de chaque div. Un grand rayon de bordure transformera la bordure en cercle parfait. Nous allons également définir la durée de l’animation à l’aide de la propriété d’animation CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Nous allons styliser les points avec une hauteur et une largeur de 5 pixels. Nous leur donnerons un rayon de bordure et une couleur de fond blanche. Chaque point sera positionné de manière absolue, près du coin supérieur droit de son div parent.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
En utilisant le sélecteur de n-ième enfant, nous allons positionner chaque div en utilisant différents paramètres. Nous allons nommer l’animation « animate »; nous la définirons ultérieurement avec @keyframes.
Nous allons utiliser nth-child(2) pour cibler le premier div, étant donné que le premier enfant de l’élément « .wrapper » est le h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Les divs suivants recevront des pourcentages plus élevés, afin qu’ils atteignent le haut de l’écran à des intervalles différents.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Nous allons utiliser @keyframes pour modifier et faire pivoter progressivement les cercles et les points à des intervalles différents. Dans le code suivant, les points tournent de 70 degrés et les cercles de 360. Cette rotation crée un effet de bulle.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Il existe de nombreuses façons d’améliorer l’esthétique de votre arrière-plan grâce aux motifs CSS. Ces motifs vous permettent de créer des vagues, des grilles, des feuilles et d’autres formes originales pour réaliser des animations d’exception.
Vous pouvez animer de nombreuses propriétés avec CSS
Le CSS vous permet de créer divers types d’animations, telles que le changement de couleur de fond ou le retardement de l’exécution d’une animation.
Il est également possible de définir la fréquence d’exécution d’une animation, même à l’infini. Vous pouvez également définir la direction dans laquelle l’animation se déplace : vers l’avant ou vers l’arrière. Il est très amusant d’explorer les possibilités offertes par les animations pour donner vie à vos applications.