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

avatar de baptiste pagès
Par Baptiste Pagès le 22 décembre 2021

Publié dans Tutoriel

Mis à jour le 14 janvier 2022

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.
Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
0