Les GIF animés, c’est sexy
Rien ne se perd, tout se crée, le reste se recycle. Cette phrase absurde pour un physicien pourrait bien être un principe élémentaire de la toile virtuelle.
Le miracle javascript
Depuis 5 ans, on assiste au retour spectaculaire du javascript, considéré précédemment comme ringard et révélateur de mauvaise moralité. Cela est dû à l’apparition d’ajax et des frameworks tels que prototype, jquery et mootools qui (et c’est sans doute là une caractéristique des frameworks) ont permis de faire les choses simplement et proprement.
Avant cela, la puissance du javascript était mal dominée et donnait lieu à des utilisations du plus mauvais goût. Tel est le mal dont souffrent également, à mon avis, les GIF animés.
Le réveil du dynamisme
Le dynamisme dans les interfaces utilisateurs sur le web, c’est un peu la belle au bois dormant. Contraint à un sommeil sans fin par une méchante sorcière (les pratiques honteuse du javascript), il se voit réveillé par un prince charmant : jquery (enfin, plusieurs princes charmants en fait, mais je ne vais pas rentrer dans cette polémique).
Aujourd’hui, nos sites ont la bougeote. Nous pouvons faire glisser des blocks, les faire apparaître, disparaître, se faire remplir par une autre page, et toutes sortes de combinaisons plus agréables les unes que les autres. Reste que les images demeurent méchamment statiques.
GIF, mon héro
C’est ici que GIF intervient. L’utilisation de gif animés permet de rendre l’interface javascript plus… fluide (des gif animés pour rendre plus fluide un site, ça fait mal aux oreilles, hein?). Pour vous en convaincre, j’ai mis en place une page de démonstration.
Exit les encarts publicitaires animés (aujourd’hui remplacés par du flash, plus joli mais tout aussi ennuyeux et perturbant pour le design). Ce dont il s’agit, c’est de prendre un élément de votre page (petit, de préférence) et de l’animer lors d’un événement particulier, pour ensuite le faire revenir à la normale.
Et les outils?
Reste que si on doit soi-même composer chaque frame d’un GIF animé pour faire une animation fluide, la procédure est pénible et peu rentable. Rappelons-le : la force de jquery, ce n’est pas simplement de permettre de faire de beaux effets, c’est aussi de permettre de le faire simplement.
J’ai démarré le développement d’une bibliothèque de scripts pour gimp, giffects. J’ai utilisé ces effets sur la page de démonstration. Il n’y a pour l’instant que deux effets, rotating et glowing, et ils sont loins d’être des produits finis, mais ils sont déjà utilisables. N’hésitez pas à me contacter si vous désirez participer au projet.
Et si l’idée de réhabiliter les GIF animés vous plaît, relancez Bouctoubou :)
P.S.: petite appendice technique
Webkit et gecko ont un petit bug ennuyeux (ou feature, mais ennuyeux quand même dans notre cas).
Soit un GIF animé chargé dans la page. Ce GIF n’est pas réglé pour tourner en boucle infinie (par exemple, les flèches des menus dans ma première démonstration). Lorsque ce GIF est chargé dans un second élément, le premier redémarre son animation en même temps. Je soupçonne que cela soit dû au fait que les GIF partagent un même timer (mais alors, pourquoi cela n’affecte que les GIF provenant du même fichier?).
Si vous n’utilisez qu’un seul exemplaire du même GIF dans votre page, cela ne pose pas de problème. Si vous en utilisez plusieurs, la solution est de remplacer le GIF par une autre image lorsque l’animation est terminée. C’est possible avec jquery grâce aux callbacks qui s’execute à la fin d’un effet.