Le header est la première chose que voit le visiteur en arrivant sur votre site. C’est donc une zone primordiale pour placer les informations les plus importantes.
Par conséquent, son graphisme est à travailler avec soin.
Voyons comment les animations CSS peuvent vous aider à mettre le header de votre site Divi encore plus en valeur.

Ça commence dans Photoshop

Je vais tout d’abord vous expliquer comment j’ai préparé les images utilisées dans la démo.

La montagne

Une fois la photo détourée et dimensionnée (2500 px de large), j’ai choisi Fichier -> Enregistrer pour le web.
Pour ce type d’image où l’on souhaite conserver de la transparence, il est impensable de choisir de l’exporter en PNG24, car le poids du fichier serait bien trop élevé pour être inséré sur un site (près de 4 Mo pour la montagne !).

J’ai donc choisi le format PNG8, cousin du GIF mais généralement plus léger.
L’inconvénient avec ces 2 formats de fichier, en comparaison au PNG24, est que les contours de l’image détourée ne sont pas nets (et du blanc apparait) étant donné qu’ils ne supportent que 256 couleurs.
Pour atténuer cet effet, j’ai appliqué un cache du même bleu que le ciel qui sera ajouté plus tard.

J’ai également réduit autant que possible le nombre de couleurs afin d’alléger encore le poids du fichier. Toujours en prenant soin de conserver un rapport qualité/poids optimal.
Enfin, le tramage de type “Motif” a permis de minimiser l’apparition d’artefacts souvent visibles sur les GIF ou PNG8 trop optimisés.

Les nuages

J’ai réalisé moi-même mes 2 images de nuages avec des brushes Photoshop.
Étant donné la complexité de la transparence de ce type d’image, seul l’export en PNG24 était envisageable.

Et on passe à Divi

Insérez et configurez une section

Sur la page où vous souhaitez construire votre header animé, commencez par insérer une section Plein Écran.

Dans les paramètres de la section Contenu -> Fond, ajoutez un dégradé linéaire pour faire le ciel.
Les valeurs que j’ai utilisées : bleu foncé #12296c, bleu clair #4875c6

Insérez et configurez votre en-tête

Choisissez d’insérer un module En-tête plein écran dans la section précédemment créée.

Dans les paramètres du module En-tête plein écran, Contenu -> Fond : réduisez l’opacité de la couleur de fond afin de la rendre totalement transparente.

Puis, dans l’onglet voisin, importez en image de fond le PNG24 de la montagne détourée en choisissant les mêmes réglages que la capture d’écran ci-dessus.

Toujours dans les paramètres du module En-tête plein écran, dans Style -> Modèle, choisissez l’option Passer en mode plein écran.

Pour terminer avec les réglages de ce module, rendez-vous dans Avancé -> Personnaliser CSS -> Élément principal et ajoutez z-index:1;
Ceci permettra de placer la montagne “en sandwich” entre 2 couches de nuages.

Ajoutez des nuages

Insérez maintenant 2 modules Image en pleine largeur dans votre section.

• Dans le premier module :
  • uploadez l’image des nuages qui doivent aller derrière la montagne
  • dans Avancé -> ID et classes CSS, ajoutez l’ID CSS nuages-animes-derriere
• Dans le second module :
  • uploadez l’image des nuages qui doivent aller devant la montagne
  • dans Avancé -> ID et classes CSS, ajoutez l’ID CSS nuages-animes-devant

Un peu de CSS

Il faut désormais positionner correctement les nuages et les animer.

Si vous ne savez pas où insérer les CSS nécessaires, vous pouvez lire notre tutoriel sur les 7 manières d’ajouter des CSS à Divi.

Les nuages de derrière

#nuages-animes-derriere {
	position:absolute;
	top:0px;
	width: 2368px;
	height: 540px;
	animation-name: animation-nuages-derriere;
	animation-duration: 500s;
	animation-iteration-count: infinite;
	-moz-animation-name: animation-nuages-derriere;
	-o-animation-name: animation-nuages-derriere;
	-webkit-animation-name: animation-nuages-derriere;
	-moz-animation-duration: 500s;
    -o-animation-duration: 500s;
	-webkit-animation-duration: 500s;
	-moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes animation-nuages-derriere {
  0% {left:1000px;}
  100% {left:-1800px}
}

@-moz-keyframes animation-nuages-derriere {
  0% {left:1000px;}
  100% {left:-1800px}
}

@-o-keyframes animation-nuages-derriere {
  0% {left:1000px;}
  100% {left:-1800px}
}

@-webkit-keyframes animation-nuages-derriere {
  0% {left:1000px;}
  100% {left:-1800px}
}

Détaillons ce code

• LA POSITION
  • Ligne 2 : on attribue une position absolue à notre image
  • Ligne 3 : ces nuages sont placés tout en haut
  • Lignes 4 et 5 : on précise les dimensions de l’image
• L’ANIMATION
  
  • Ligne 6 : on nomme notre animation, ce qui nous permettra un peu plus loin de définir les images-clés qui la concernent
  • Ligne 7 : on définit la durée de notre animation en secondes
  • Ligne 8 : on précise que notre animation devra se répéter infiniment
  • Ligne 9 à 17 : versions avec préfixes
  • Ligne 20 : on déclare maintenant les images-clés qui composent l’animation
  • Ligne 21 : au début de l’animation (à 0%), les nuages se trouveront à 1000 px du bord gauche de la section
  • Ligne 22 : à la fin de l’animation (à 100%), les nuages se trouveront à -1800 px du bord gauche de la section, ils disparaitront donc “hors de l’écran”
  • Lignes 25 à 37 : versions avec préfixes

Les nuages de devant

Nous allons retrouver le même schéma de règles CSS pour les nuages qui se situent au premier-plan, devant la montagne et les textes du header.

#nuages-animes-devant {
	position:absolute;
	top:15vh;
	z-index: 2;
	width: 1660px;
	height: 592px;
	animation-name: animation-nuages-devant;
	animation-duration: 100s;
	animation-iteration-count: infinite;
	-moz-animation-name: animation-nuages-devant;
	-o-animation-name: animation-nuages-devant;
	-webkit-animation-name: animation-nuages-devant;
	-moz-animation-duration: 100s;
	-o-animation-duration: 100s;
	-webkit-animation-duration: 100s;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes animation-nuages-devant {
  0% {left:1500px;}
  100% {left:-2000px}
}

@-moz-keyframes animation-nuages-devant {
  0% {left:1500px;}
  100% {left:-2000px}
}

@-o-keyframes animation-nuages-devant {
  0% {left:1500px;}
  100% {left:-2000px}
}

@-webkit-keyframes animation-nuages-devant {
  0% {left:1500px;}
  100% {left:-2000px}
}

Les différences sont les suivantes :

• Ligne 3 : les nuages sont positionnés plus bas, et pour ce faire j’ai choisi d’utiliser l’unité vh qui se base sur la hauteur de l’écran sur lequel le site est affiché
• Ligne 4 : il faut ajouter une valeur de z-index un peu plus élevée que celle du module En-tête plein écran afin de faire passer l’image de ces nuages devant la montagne
• Lignes 5 et 6 : il faut bien préciser les dimensions de cette image
• Ligne 8 : la durée de l’animation est plus courte car ces nuages étant plus près, ils donnent l’impression de se déplacer plus vite
• Lignes 22 et 23 : il faut également adapter la position de départ et d’arrivée des nuages

Ajustement optionnel

Les nuages du premier plan apportent un effet de profondeur intéressant, car en recouvrant le module En-tête plein écran, ils passent par-dessus le titre.
Mais, ils recouvrent également le bouton présent dans ce module, ce qui le rend inaccessible, impossible à cliquer…

Pour contrer ça, commencez par ajouter une valeur de z-index élevée à ce bouton.

.header-content .et_pb_button {
  z-index: 100;
}

Mais… ce n’est pas suffisant. Le bouton et l’image des nuages de devant n’ayant pas la même div parent, le z-index seul est inefficace.
Il faut donc déplacer l’image des nuages de premier-plan pour l’insérer dans la même div parent que le bouton, à savoir la div ayant la classe header-content.
Ceci se fait très facilement avec quelques lignes de jQuery que vous ajouterez dans un module Code en pleine largeur dans votre section Plein écran.

<script>
	jQuery(document).ready(function($){
    if ($(".header-content .et_pb_button").length){  
   	 $("#nuages-animes-devant").appendTo( $(".header-content") );
    };
  });
</script>

Détaillons ce code

• Ligne 3 :  si le bouton du header est présent
• Ligne 4 : on déplace les nuages animés du premier-plan à la fin de la div ayant la classe header-content

Un aperçu du DOM

Avant le déplacement

Après le déplacement

En conclusion

Vous savez désormais comment dynamiser les headers de vos sites Divi avec les animations CSS.
Ce tutoriel présente un exemple plutôt simple, avec des animations comprenant seulement 2 étapes. Mais maintenant que vous connaissez le principe, vous pouvez créer des animations bien plus complexes et contenant un plus grand nombre d’images-clés, pour un effet encore plus grandiose.
Pour vous aidez, vous pouvez par exemple utiliser CSS Animate, un générateur en ligne d’animations CSS.

Partager