Ouvrir une page après une petite animation

Version imprimable

08/05/2010, 14h30
JeanMarc_T2k

Ouvrir une page après une petite animation

Bonjour,

Sur mon site internet, on passe de la page index à la page de présentation en cliquant sur une image située au centre de l'écran.

Je voudrais remplacer cette image fixe par une petite animation, qui se lancerait quand on clique dessus. A la fin de l'animation, on passerait à la page de présentation. L'animation ne devrait pas tourner à l'affichage de la page index.

Pour être plus clair : lorsqu'on affiche la page index, on verra une photo fixe d'un portail. Lorsqu'on clique sur l'image, je souhaiterais voir le portail s'ouvrir (j'ai les photos de quelques étapes de l'ouverture, je ne souhaite pas vraiment une video), puis lorsqu'il est ouvert, qu'on passe à la page de présentation.

Ma question est très simple : comment faire ?

J'ai déjà trouvé un script javascript, qui fait défiler les images, en boucle. en la modifiant un peu, je pense pouvoir obtenir une séquence unique. Ce que je ne sais pas trop, c'est comment faire pour appeler ma page ded présentation à la fin de la séquence.

Je suis preneur de toute autre solution, ou suggestion.

D'avance merci !
08/05/2010, 18h18
SpaceFrog

j'imagine bien un petit tur avec jquery qui modifie le la position du background d'un div
un peu comme dans cette contribution
ce qui permet ensuite de maitriser la fin de l'animation et d'appeler la page suivante sur le callback
08/05/2010, 18h38
JeanMarc_T2k

Merci SpaceFrog pour cette réponse, dont il manque à mon avis une partie... C'est sans doute l'illustration des 2 règles pour réussir ;) ....
08/05/2010, 18h52
SpaceFrog

Arrf il va encore falloir que je gère une nouvelle dose de succès :P

Il manque en effet le lien vers al petit contribution salvatrice ;)
http://www.developpez.net/forums/d90...-dessin-anime/
10/05/2010, 09h05
JeanMarc_T2k

Bonjour,

Je reformule ma demande, car la réponse qui a été apportée ne correspond pas à la question....

- j'ai une page affichée avec une image fixe
- lorsque je clique sur cette image, je veux que 5 à 6 images différentes s'affichent successivement au même emplacement, à un intervalle d'une demi seconde à 1 seconde
- ensuite, à la fin de cette succession, je veux qu'une nouvelle page s'affiche.

Autrement dit, je souhaite que au clic sur l'image, apparaisse une image représentant le chiffre 5, puis 4, puis 3, puis 2 puis 1 puis 0, et enfin une nouvelle page remplace la page actuelle.

L'exemple proposé montrait une animation déjà en mouvement à l'affichage de la page, et se déroulant en boucle infinie, de plus avec déplacement de l'image dans l'écran, ce que je ne souhaite pas.

D'autre part, je ne sais pas comment faire pour :

Citation:

maitriser la fin de l'animation et d'appeler la page suivante sur le callback

Sans doute cette demande parait tellement évidente que la réponse n'a pas été donnée. Elle ne l'est pas pour moi... Je suis autodidacte, donc imparfaitement compétent.
10/05/2010, 10h54
SpaceFrog

Je reformule ma réponse puisque apparemment tu n'as pas du la saisir ...

Citation:

- j'ai une page affichée avec une image fixe

Il suffit de mettre au depart la première image du sprite

Citation:

- lorsque je clique sur cette image, je veux que 5 à 6 images différentes s'affichent successivement au même emplacement, à un intervalle d'une demi seconde à 1 seconde

ben là sur le click il suffit de lancer le script qui va faire defiler les 4 à 5 images suivantes ...

Citation:

- ensuite, à la fin de cette succession, je veux qu'une nouvelle page s'affiche.

Et là sur la callback de la fonction on ouvre la page suivante ...

Vaut mieux en général dire je n'a pas réussi à mettre en oeuvre ce que l'on m'a proposé plutot de dire que ça ne correspond pas à ce que je demande ...:roll:
10/05/2010, 11h16
JeanMarc_T2k

Est ce que j'abuse si je demande comment ça s'écrit en langage informatique ?

En particulier la dernière étape, le fameux

Citation:

sur la callback de la fonction on ouvre la page suivante

Je n'en suis pas encore à une mise en oeuvre, j'en suis à une recherche de propositions qui font ce que j'aimerais, ou qui s'approchent de ce que j'aimerais. En les étudiant ensuite, je pense arriver à les adapter à mes désirs.

Dans les exemples que tu m'as présentés, je n'ai pas vu quelque chose qui affiche une autre page à la fin d'un processus. Peut être ai-je regardé trop vite ?

Je répète que c'est surtout la dernière partie qui me pose problème.

J'ai dit dans mon dernier message que je suis imparfaitement compétent, peut être devrais-je avouer que je suis parfaitement incompétent :sm:

il manque en effet ce détail dans la contibution
en jquery poru appeler une fonction à la fin d'un traitement (callback) il suffir de l'ajouter avec une virgule àpres la fonction de traitement
ce qui pour ton animation pourrait donner:

Code:

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
 
  $("#anim").onclick(function(){
                                         /*ici le deplacement temporisé du background
                                            créant l'animation d'ouverture */
                                           , self.location.href="autrepage.htm";
                                          });
                   });