Créer un arrière-plan animé sans plugin : petit tuto WordPress

Envie d'épater vos visiteurs ?

Une des façons d'y arriver et de créer un petit arrière-plan animé. C'est assez facile à faire, très léger (donc très peu d'impact sur le temps de chargement) et ça rend bien.

L'intérêt d'un arrière-plan animé

Pour moi, il y a deux intérêts.

D'abord, l'originalité. Vos visiteurs ne voient pas d'arrière-plans animés tous les jours, s'il est bien fait il vous pourra donc vous faire sortir du lot de vos concurrents.

Ensuite, il attire le regard. Une page web sera majoritairement statique, ce qui bouge attirera donc forcément le regard, la nature nous a fait ainsi. Du coup, utiliser un arrière-plan animé sous vos appels à l'acte pourra les faire ressortir et augmenter votre taux de conversion.

Attention cependant. Comme je le dis souvent, travailler sur ce genre de détails n'a aucun sens si votre site n'a pas de visiteurs. Si vous avez moins de 10 visiteurs par jour, envisagez de me commander un audit de référencement afin de voir comment vous pourriez attirer plus de visiteurs.

Le procédé de création

L'idée est simple, on procède en 4 étapes.

1. On choisit un arrière plan sur https://heropatterns.com/ ;
2. On l'applique à un GROUPE dans Gutenberg via du CSS ;
3. On anime l'arrière à l'aide d'une animation CSS.

Voici le code que j'utilise dans la vidéo :

.bg-anime{
 background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23dbdbdb' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 border:1px solid #eee;
 animation: 60s linear 0s infinite alternate animationhorizontale;
}
@keyframes animationhorizontale { 
 from { background-position:-100%; } 
 to { background-position:100%; }  
}

Mes conseils pour les animations d'arrière-plan

Techniquement, une animation d'arrière-plan n'est pas très difficile à mettre en place. Mais on peut facilement faire des erreurs de design qui heurteront la crédibilité du site. Si vous êtes un designer débutant, soyez très prudent lorsque vous utilisez des arrière-plans animés.

• Veillez à ce que l'arrière plan ne baisse pas la lisibilité du texte qui est au-dessus. L'animation doit être discrète et attirer l'attention, c'est le texte la star du show. Vous vous êtes donné du mal pour créer l'animation, donc vous voulez la mettre en avant. C'est compréhensible, mais c'est une grossière erreur. Jamais aucun élément de design ne devrait entraver la lecture d'une page web.
• Pour cette même raison, veillez à ce que l'animation soit lente. Si elle est trop rapide, elle dérangera le visiteur. Elle doit être très calme.
• Attention également au saccades : dans la vidéo, vous verrez que je dois adapté la durée de l'animation pour éviter les saccades.
• Désactivez l'animation sur mobile ! Les mobiles ont moins de ressources et ce genre d'animation a tendance à tirer sur le processeur.