Publié dans Tutoriel
Mis à jour le 14 janvier 2022Envie 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.
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.
L'idée est simple, on procède en 4 étapes.
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%; }
}
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.