[Démonstration] Un fond d'image qui défile !

[Sephi-Chan]

Salut à tous,

J'ai l'insigne honneur de vous présenter le fruit de mon tout récent travail : j'ai repris du service (ou pris plutôt) dans Javascript.

http://tryban.rpg.free.fr/Seelies/Defilement/

J'ai travaillé environ 3 heures pour atteindre ce résultat, car il m'a fallu pas mal de temps pour apprendre à me servir des tableaux à plusieurs dimensions, sujet pour lequel je me suis pas mal compliqué la tâche inutilement. Je remercie d'ailleurs Naholyr pour quelques conseils d'optimisation du script.

Le système a été, à mon agréable surprise, compatible avec tous les navigateurs de dernière génération (Internet Explorer 7, Firefox 2, Opera 9 et Safari 3) dès les premiers tests !

Je déplore seulement une corruption des couleurs sur IE7 et Safari 3, le qui entoure le cercle est normalement le même que celui du fond de la page. Si quelqu'un a des pistes pour pallier à ça, je suis intéressé.


Sephi-Chan

[Trent]

Excellent résultat, c'est vraiment bluffant !
Je dois dire que je n'avais jamais pensé a un tel bouton, merci de m'avoir fait découvrir cette bauté !

[X-ZoD]

tableau a plusieurs dimension ?
tu l'a fait avec la lib gd ?
enfin non ca doit pas etre ca
... parce qu'en fait je voi pas ou tu peux faire ca dans un logiciel comme photoshop ... ca m'intrigue .
quels etaient tes outils ?

[Shiwa]

Il a dit qu'il utilisait javascript, je suppose donc qu'il s'agit d'un petit script qui change constamment la position de l'arrière-plan en modifiant les propriétés CSS. Tu peux le voir en regardant le code source de la page.
Impressionant techniquement, mais je me demande si ça présente un avantage face à un gif animé ou du flash.

[Joojo]

C'est vraiment bien fait je trouve. (h)

[Sephi-Chan]

Impressionant techniquement, mais je me demande si ça présente un avantage face à un gif animé ou du flash.

Pour une simple animation, le GIF est plus intéressant, c'est sûr. Le Flash aussi d'ailleurs, même si je n'aime pas trop cette technologie.

L'idée derrière tout ça, c'est de pouvoir donner vie à mon design suivant plusieurs événements. Ça irait de simples comportement de survols à des choses un peu plus amusantes, par exemple l'arrêt, le ralentissement ou l'inversion du sens de défilement de tous ces boutons suite à un message d'erreur, ou autre choses inutiles mais qui donnent du charme à une interface.


Sephi-Chan

[X-ZoD]

hum
ok maintenant je vois mieux commenttu t'y prend

[Trent]

Impressionant techniquement, mais je me demande si ça présente un avantage face à un gif animé ou du flash.

Si l'on considère la lourdeur de flash et son accéssibilité minable, il est plus que déconseillé de l'utiliser sur des boutons.
GIF quand à lui ne propose que 256 couleurs, et la également je suis persuadé que ce serais plus lourd et néttement moin beau.

En éffet, le GIF si vous voulez faire un truc comme celui la sera assez moche du fait du nombre de couleur, mais aussi du nombre d'image, il ne faut pas espérer revoir quelque chose de la qualité de celui la en GIF sans quoi ce dernier péserais 1Mo.

En APNG et SVG, il serais toutefois possible de faire un résultat de même bauté .

[Sephi-Chan]

C'est en effet la quantité très limitée des couleurs indexés du GIF et le poids final d'une telle animation qui ferait peur.
De plus, pour faire une animation "infinie" en GIF, il faudrait ruser, générant quelques KO supplémentaires pour rien.

Concernant APNG et SVG, on verra ça quand ils seront mieux implémenter. Déjà que j'ose à peine imaginer la tronche de mon script sur IE6...


Sephi-Chan

[Trent]

Concernant APNG et SVG, on verra ça quand ils seront mieux implémenter. Déjà que j'ose à peine imaginer la tronche de mon script sur IE6...

pour APNG, y a pas trop de soucis à se faire, Firefox 3 et Opera 9.5 le géreront sans aucun doute.
Pour SVG, Opera 9.2 supporte dans les 80% de SVG 1.1,
Après y a le soucis firefox, il ne gère aucune fonction d'animation SVG. La plupars des filtres sont également incompatible ainsi que quasiment tout les effets...
Et il y a le soucis IE, qui lui demande un plugin pour l'affiché.