contrôle d'une animation en js

Mammouth du PHP | 601 Messages

17 janv. 2007, 15:39

Bonjour,
j'ai fait une ébauche d'animation en 3d :
http://creatif-web.be/tee_shirt/anim.gif
Pour un futur site de tee-shirt, je cherche volontairement à ne pas utilisez flash pour un soucis d'accéssibilité, ainsi je dois pouvoir contrôler mon animation sur un évenement et le chargement de la page.
D'avance merci pour les futurs pistes.
edit : avec prototype et scriptalous, sa ne fonctionne que sous ie... enfin a peu près, mais j'ai une belle animation au clic
http://creatif-web.be/tee_shirt/
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

17 janv. 2007, 16:03

C'est un gif animé, toutes les informations relatives à l'animation sont contenues dans le fichier et tu ne peux pas le "piloter". L'animation est prévue pour se déclencher automatiquement dès la fin du chargement du fichier pour le nombre de fois spécifié à l'intérieur de celui-ci.

Au mieux tu dois pouvoir faire un second fichier, pas animé, et intervertir (il ne suffit pas de jouer avec les styles) les deux lors de ton événement ce qui aura pour effet de charger et déclencher l'animé. En revanche je ne crois pas qu'avec un gif animé tu puisses avoir d'étapes intermédiaires (stopper l'animation, la reprendre, repartir dans l'autre sens, etc.)

Après tout dépend de ce que tu cherches à faire :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

ViPHP
AB
ViPHP | 5818 Messages

17 janv. 2007, 16:48

Sur un des premiers sites que j'ai créé j'ai réalisé cet effet.
http://www.asmelloffox.com/ (passe sur un menu déclenche un gif animé, onmouseout l'animation s'arrête).
C'est une méthode de bourrin mais ça fonctionne et si cela peut de donner des idées...

Mammouth du PHP | 601 Messages

17 janv. 2007, 23:20

@Ryle
je ne comprend pas bien ta phrase peux tu illustrer s'il te plais :

Code : Tout sélectionner

au mieux tu dois pouvoir faire un second fichier, pas animé, et intervertir (il ne suffit pas de jouer avec les styles) les deux lors de ton événement ce qui aura pour effet de charger et déclencher l'animé
Merci
AB
j'ai du mal avec ton code...
Modifié en dernier par artotal le 17 janv. 2007, 23:32, modifié 1 fois.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

ViPHP
AB
ViPHP | 5818 Messages

17 janv. 2007, 23:31

Artotal,

As-tu été voir le code source de la page que je t'ai indiquée http://www.asmelloffox.com ?

Il reprend exactement ce principe : une image fixe au départ, puis le gif animé qui vient se supperposé à cette image onmouseover, et l'image originale est restituée onmouseout.

Mammouth du PHP | 601 Messages

17 janv. 2007, 23:35

oui mais mon angle à 90° va poser un problème (profile du tee-shirt), par contre ton animation boucle en continu sur ce principe, parce que je pourrai peut être faire un display:none;
Sa y est j'ai compris ton code, merci.
PS : dès fois je réfléchis pas
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

ViPHP
AB
ViPHP | 5818 Messages

18 janv. 2007, 00:26

Et ça, cela ne te suffirait pas ?

http://www.abciweb.net/anim.html

Mammouth du PHP | 601 Messages

18 janv. 2007, 01:02

t'est trop fort AB, si je peux faire quelque chose pour toi n'hésite pas...
J'ai vraiment du mal avec le js.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

ViPHP
AB
ViPHP | 5818 Messages

18 janv. 2007, 01:07

Artotal,

Content que tu sois satisfait. Je viens d'optimiser le code pour que ce soit encore plus facile à mettre en place.
:wink:

Mammouth du PHP | 601 Messages

18 janv. 2007, 01:25

je vais pouvoir faire un peu plus de 3d dans mes sites. mon problème c'est le dynamisme avec le js, je dois faire un sytème drag and up, j'ai tout de suite penser à scriptalous et protoype, j'ai quelque fonction qui fonctionne bien mais j'ai un problème de compréhension notamment sur l'Event de prototype dans la fonction observe, mais c'est encore une autre histoire. C'est de la décortition (prototype).
Tu verras le site avec t'es fonctions si le projet m'est confié ;-)
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

ViPHP
AB
ViPHP | 5818 Messages

18 janv. 2007, 02:03

heu... ce ne sont pas mes fonctions...
Disons que mon mérite c'est de faire preuve d'un peu d'astuce et de savoir exploiter les fonctions d'un vieux logiciel dont je tairai le nom au risque de me faire damner par toute la communauté jusqu'à la fin des fins... :wink:

ViPHP
AB
ViPHP | 5818 Messages

18 janv. 2007, 02:43

Enfin, pour en terminer sur le sujet:

Les gifs animés sont lourds, tu pourrais peut-être supprimer quelques images intermédiares pour gagner en poids. Ce serait moins fluide ... mais à toi de voir.
Mais par contre, pour le même poids, tu pourrais faire une petite pose quand l'animation montre le dos du tee shirt. Les clients auraient plus de temps pour voir ce qui les intéressent le plus : la face et le dos.
J'ai modifié ton gif animé en conséquence pour te donner un exemple.

http://abciweb.net/anim.html

Allez, bon courage, et si tu as besoin de quelqu'un pour faire un peu de sous-traitance, je suis sans développement en cours pour l'instant. C'est bien pour ça que je suis là :lol:

Mammouth du PHP | 601 Messages

18 janv. 2007, 03:43

En faite le tee-shirt c'est pas se que je vais mettre en place, j'ai d'autre idée, c'est un problème qui m'intriguait. Je compte faire un menu en tee-shirt extensible en pur 3d, sa ne me semble pas très judicieux. Je fait des design liquide et qu'on ne peux pas répéter une partie de l'image d'un gif comme ici
http://creatif-web.be/marguerite/index.php
Ainsi pour personnaliser un tee-shirt pris dans un catalogue il faudrai un moteur de 3d et là c'est un autre univers d'autant que j'ai utilisé poser et photoshop, 2 soft, sachant que les tee-shirt viennent d'une bdd et aussi parce que j'ai définis les grandes lignes du projet et notamment le drag and up "il as insisté" je vais donc devoir faire de l'ajax sa sera tant mieux
Mais l'utilité probable sera ailleurs.
Je suis surbookés, donc je travail pour des associations et je ne décide de rien, mais en contre partie j'ai la main libre pour se qui est créations et conduite de projet, mais sa ne paye pas. Je suis payé à mi-temps ( et pourtant je fait bien plus de 40h par semaine). C'est le seul travail que j'ai trouvé, donc je suis très content d'avoir la chance de travailler.
On a pas le droit de se plaindre quand on a un travail aujourd'hui.
D'autant que se site si on me le confie sera le seul que j'attaquerai pour mon compte
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Mammouth du PHP | 1885 Messages

18 janv. 2007, 06:07

Le même "effet" est utilisé ici: http://www.sitepoint.com/
Sur les icons à coté des posts des blogs.
La programmation est l'expression de la poésie d'un programmeur
Génération PHP