Les graphiques animés en forme de cœur font une décoration intéressante pour votre site Web, en particulier pendant les vacances comme la Saint-Valentin. Vous trouverez ci-dessous quelques moyens de les obtenir facilement et comment les utiliser efficacement.
Table des matières
Graphiques animés de cœur à l’ancienne
L’idée de l’animation est simple – créer une série d’images (aka « frames ») dans lesquelles un objet similaire est montré dans une position légèrement différente. Montrez ces images de manière séquentielle, et l’œil du spectateur se trompera en pensant qu’il s’agit d’un objet en mouvement. Un premier format d’image Web connu sous le nom de « GIF » (abréviation de Graphic Image Format) fonctionnait très bien pour cela. En effet, les GIF sont conçus pour les dessins et non pour les photos, de sorte que les développeurs peuvent réduire la taille du fichier tout en affichant des images assez lumineuses.
Vous pouvez toujours trouver des GIF animés sur le Web, généralement disponibles gratuitement, sur des sites comme Hellas Multimedia. Cependant, trois éléments concernant les images peuvent les rendre inadaptées à votre projet:
- Parce que ce sont des dessins à très basse résolution, ils ont un aspect rugueux et irrégulier.
- Afin de garder la petite taille du fichier, les images sont toutes très petites – et si vous essayiez de les redimensionner, la faible résolution mentionnée ci-dessus les rendrait encore pires.
- Chaque GIF animé ne mesure qu’environ quatre ou cinq images, ce qui signifie que l’animation elle-même est plutôt saccadée. En règle générale, moins il y a d’images, moins le mouvement apparaîtra lisse.
Pour donner une référence, les films ont vingt-quatre images par seconde, pour impliquer un «vrai» mouvement – et la télévision en utilise près de trente. Cependant, trouver autant d’images dans un GIF animé est un processus fastidieux.
La manière du Web 2.0: Flash et DHTML
Au fur et à mesure que les progrès des graphiques sur le Web se développaient, des moyens plus efficaces de créer des graphiques animés en forme de cœur ont suivi. L’outil le plus utilisé et le plus flexible serait probablement le FLASH d’Adobe, qui est passé d’un simple outil d’animation à une plate-forme de programmation robuste.
Animations FLASHy
Il y a deux inconvénients principaux à utiliser FLASH pour vos graphiques de cœur animés. La première est que cela peut être exagéré; si la seule animation dont vous avez besoin est un cœur, alors passer par le processus de création d’une application FLASH, de la programmer, de la télécharger et de configurer votre page Web pour l’afficher peut être plus que vous ne voudriez vraiment vous embêter.
Deuxièmement, toutes les pages Web n’affichent pas FLASH. Bien qu’il soit largement utilisé (des sites populaires comme YouTube en dépendent), Flash a également été lié à plusieurs risques de sécurité sur le Web, et certaines personnes choisissent de ne pas l’installer sur leur ordinateur.
Vous pouvez cependant trouver des animations FLASH de cœurs et d’autres choses sur le Web, à des prix assez bas, et avec plusieurs options (comme faire suivre les cœurs de la souris sur l’écran).
HTML dynamique
Une deuxième méthode utilisée pour créer des graphiques animés en forme de cœur consiste à tirer parti des nouvelles normes en CSS et DHTML. Dans cette méthode, l’animation peut toujours être une série d’images, ou il peut s’agir d’une image qui est ensuite manipulée et modifiée au fil du temps par le code DHTML. Pour donner un exemple simple, le code pourrait indiquer au navigateur d’afficher d’abord l’image du cœur en haut de l’écran, puis d’incrémenter les coordonnées de l’emplacement vertical d’un pixel chaque fraction de seconde. C’est la même théorie que l’animation GIF, mais au lieu de dessiner des images individuelles, l’ordinateur fait le travail.
DHTML nécessite une certaine connaissance du codage tel que Javascript, mais c’est assez facile à apprendre en ligne. Ou vous pouvez également utiliser des scripts d’animation prédéfinis.
Quelle que soit la méthode que vous utilisez, rappelez-vous qu’il y a une ligne fine entre une animation mignonne et une animation ennuyeuse – alors utilisez-les avec précaution et assurez-vous qu’elles n’enlèvent pas le message ultime de votre site.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
