L’effet de mouvement d’un GIF est généré en enfilant une série d’images ensemble, presque comme une photographie en stop-action. Cette courte séquence d’images est ensuite mise en boucle qui donne à l’image ses qualités animées. Appliquer l’une de ces images à votre site Web consiste simplement à l’insérer à l’aide d’un code. Diverses sources gratuites proposent des images créées pour être utilisées comme arrière-plans, mais vous pouvez tout aussi facilement insérer une image plus petite sur la page pour obtenir le look que vous souhaitez.
Table des matières
Huit sources pour les arrière-plans GIF animés
Il existe de nombreuses sources disponibles sur Internet pour les arrière-plans GIF animés. Lorsque vous utilisez une image sur votre site, consultez le site pour toute politique d’utilisation afin d’éviter de violer les lois sur les droits d’auteur. Huit des meilleures ressources gratuites sont répertoriées ci-dessous.
- Gifs.net: Cette source propose des images GIF plus petites liées à différents domaines, tels que les sports, la nature, les vacances, la nourriture, la technologie, les dessins animés et les animaux.
- Backgrounds.Free-Animations.co.uk: Les images de ce site Web sont spécifiquement conçues comme arrière-plans et comprennent des étoiles, des couleurs, des bulles et d’autres motifs. Un avantage de l’utilisation de ces images est que votre arrière-plan n’apparaîtra pas en mosaïque et sera plus propre.
- Bells N Whistles: Des arrière-plans animés et des GIF plus petits sont disponibles ici, et vous avez le choix entre de nombreux motifs colorés. Il existe trois pages de différents arrière-plans, ainsi que plusieurs pages d’images animées, de puces et de formes.
- ART-TLC: C’est un autre site spécialisé dans les arrière-plans animés. Les six pages d’images présentent des étoiles, des effets de couleur, des effets liquides et diverses textures.
- Animations Gif: bien qu’il n’ait pas d’images spécifiquement pour une utilisation comme arrière-plan, il offre une vaste collection de petites images qui peuvent être disposées en mosaïque sur la page. Vous devrez créer un lien vers ce site Web si vous utilisez l’une des images que vous trouverez ici.
- Animations de bruyère: cette petite collection d’arrière-plans créatifs comprend des images montrant des effets spéciaux, des animaux, des bulles, des cœurs, des ballons à air chaud et des textures.
- Animer: Offrant plus de 5 000 images, ce site vous permet de prévisualiser à quoi ressemblerait chaque image en arrière-plan. La plupart des images sont de taille moyenne et doivent être mises en mosaïque sur la page pour une meilleure apparence.
Comment mettre un arrière-plan animé sur votre site
Une fois que vous avez trouvé un arrière-plan que vous aimez, vous devrez l’ajouter à votre site.
Options de méthode
Il existe deux façons générales d’ajouter un arrière-plan animé à votre site Web.
- La première option consiste à taper directement du code dans le corps d’un document HTML. Si vous utilisez cette méthode, vous devrez ajouter le code à chaque page de votre site Web, ce n’est donc peut-être pas le meilleur choix pour les sites comportant de nombreuses pages.
- La deuxième méthode est une meilleure solution si votre site Web utilise une feuille de style en cascade (CSS) pour spécifier les styles de page, car elle ne nécessite que l’ajout du code de l’image au fichier CSS unique.
Téléchargement de l’image sur votre site Web
Avant de pouvoir utiliser l’une ou l’autre méthode, vous devez télécharger le GIF sur votre site Web, généralement via FTP. En fonction de votre hébergeur, vous pouvez utiliser un programme FTP distinct ou un panneau de gestion de fichiers spécial sur votre site Web. Lorsque vous téléchargez l’image, vous devez la placer dans le répertoire contenant les fichiers HTML et CSS de votre site, le cas échéant. Cela facilitera la spécification du chemin de l’image lorsque vous ajoutez le code.
Ajout de l’arrière-plan à un document HTML
Le processus d’ajout du chemin d’une image d’arrière-plan à un document HTML est très simple, mais vous devez vous rappeler que vous devrez ajouter le code de l’image à chaque page. Utilisez le processus suivant pour ajouter le code approprié au document HTML:
- Ouvrez le fichier HTML dans une application de conception Web ou un éditeur de texte
- Localisez la balise , située sous les balises et au début du code
- Remplacez la balise par , en remplaçant « picturename » par le nom de l’image
- Enregistrez le fichier HTML et réimportez-le sur votre site Web
- Répétez le processus pour chaque page de votre site Web sur laquelle vous souhaitez afficher l’arrière-plan
Ajout de l’arrière-plan dans un fichier CSS
L’utilisation de CSS simplifie le processus d’ajout de l’arrière-plan à l’ensemble de votre site Web et permet la personnalisation. Si vous utilisez déjà CSS pour spécifier le style de votre site Web, apportez simplement les modifications suivantes au fichier CSS de votre site Web pour ajouter l’arrière-plan animé:
- Ouvrez le fichier CSS dans un éditeur de texte ou un autre programme compatible
- Localisez l’élément body {dans la feuille et appuyez sur Entrée pour créer une nouvelle ligne pour une propriété
- Tapez la ligne suivante, en remplaçant « nameofbackground » par le nom de votre fichier: image de fond: url (« nameofbackground.gif »);
- Si vous utilisez une image que vous ne souhaitez pas répéter sur la page, appuyez sur Entrée pour créer une autre ligne et tapez ce qui suit: background-repeat: pas de répétition;
- Enregistrez le fichier CSS et remettez-le en ligne sur votre serveur Web.
Les meilleures pratiques
Lorsque vous utilisez un GIF animé comme arrière-plan de votre site Web, vous devez d’abord choisir la bonne image qui a du sens dans le contexte, le ton et le sujet du site Web. Si l’image est petite, il est important de se rappeler que l’utilisation du GIF entraînera sa répétition le long de l’axe X et de l’axe Y, sauf indication contraire dans CSS. Pour les GIF plus grands, l’image peut être coupée sur les bords de la fenêtre du navigateur. Certains points principaux à prendre en compte lors de l’utilisation d’arrière-plans GIF animés sont:
- N’utilisez pas d’images qui peuvent être trop distrayantes pour le visiteur.
- Utilisez l’image correcte par rapport au contenu du site.
- Assurez-vous que l’image n’est ni trop petite ni trop grande.
- Définissez l’image à répéter sur la page si vous utilisez une petite image. (Remarque: cela se produit automatiquement si vous ajoutez simplement le code à un document HTML.)
Autres raisons d’utiliser des images animées
Il existe de nombreuses raisons d’utiliser des GIF animés, en particulier sur de petits sites Web créés par vous-même. Bien que les arrière-plans soient une utilisation courante, il existe d’autres applications de ces images, notamment:
- Attirer les yeux sur les informations de la page
- Donner au site une idée du mouvement
- Complimenter les images les plus statiques sur le site Web
- Ajouter de l’action aux bannières publicitaires sur les sites Web, attirant souvent le spectateur vers elle.
- Animation de puces pour rendre les informations un peu plus intéressantes visuellement.
Utiliser correctement les arrière-plans
La sélection d’un arrière-plan GIF approprié peut vous aider à concevoir un site Web plus attrayant et intéressant, que vous utilisiez une petite image en mosaïque ou que vous utilisiez un arrière-plan spécialement conçu. Lorsque vous choisissez une animation GIF, n’oubliez pas qu’elle doit compléter l’apparence du site Web, plutôt que la nuire. Cela signifie choisir une image de taille appropriée et éviter les images qui peuvent dissuader les visiteurs de lire le contenu de votre site. Lorsqu’il est fait correctement, l’effet d’un arrière-plan animé peut être assez agréable.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
