Bonjour à tous !
Je me permets de vous demander de l'aide pour un projet que j'ai à faire.
Je dois réfléchir à la conception d'une page comprenant les animations suivantes :
**
Construction d'une scène composée de trois plans superposés.
- Le fond est un décor qui peut contenir des éléments graphiques arbitraires, par convention une image ou une série d'images.
- Le plan médian est une ligne de temps sur laquelle sont alignés des objets (symbolisés par des icônes)
- Le premier plan (focus) permet l'affichage en gros plan d'un objet, accompagné d'une notice.
La navigation dans la page se fait au scroll (horizontalement ou verticalement).
Les deux plans du fond se déplacent en respectant un effet de parallaxe, le plan le plus proche se déplaçant plus vite que le plan le plus éloigné pour donner une impression de profondeur.
Lorsqu'une icône située sur la ligne de temps passe au centre de la fenêtre, elle est « interceptée » et placée sur le plan de focus. Lorsqu'un objet est sur ce plan, il est associé à une notice qui donne sa définition.
Nécessite quatre étapes :
1) Trouver une méthode pour faire défiler les éléments graphiques
2) Déterminer si une icône de la ligne de temps se trouve au milieu de la fenêtre
3) Redimensionner l'icône et afficher le texte associé.
4) Déplacer l'élément HTML associé à l'icône du sousarbre DOM "ligne de temps" vers le sous arbre "focus"
**
Voila.
Je suis débutante et j'ai un peu de mal à voir comment je vais m'y prendre pour faire ça.
Pour le défilement des éléments graphiques, je vais utiliser le défilement parallaxe. J'ai trouvé un tutoriel en jquery sur le site qui m'explique comment faire.
Par contre pour le reste si vous avez des pistes, je suis preneuse !
Merci !
Modifié par Ryne (15 Apr 2013 - 11:48)
Je me permets de vous demander de l'aide pour un projet que j'ai à faire.
Je dois réfléchir à la conception d'une page comprenant les animations suivantes :
**
Construction d'une scène composée de trois plans superposés.
- Le fond est un décor qui peut contenir des éléments graphiques arbitraires, par convention une image ou une série d'images.
- Le plan médian est une ligne de temps sur laquelle sont alignés des objets (symbolisés par des icônes)
- Le premier plan (focus) permet l'affichage en gros plan d'un objet, accompagné d'une notice.
La navigation dans la page se fait au scroll (horizontalement ou verticalement).
Les deux plans du fond se déplacent en respectant un effet de parallaxe, le plan le plus proche se déplaçant plus vite que le plan le plus éloigné pour donner une impression de profondeur.
Lorsqu'une icône située sur la ligne de temps passe au centre de la fenêtre, elle est « interceptée » et placée sur le plan de focus. Lorsqu'un objet est sur ce plan, il est associé à une notice qui donne sa définition.
Nécessite quatre étapes :
1) Trouver une méthode pour faire défiler les éléments graphiques
2) Déterminer si une icône de la ligne de temps se trouve au milieu de la fenêtre
3) Redimensionner l'icône et afficher le texte associé.
4) Déplacer l'élément HTML associé à l'icône du sousarbre DOM "ligne de temps" vers le sous arbre "focus"
**
Voila.
Je suis débutante et j'ai un peu de mal à voir comment je vais m'y prendre pour faire ça.
Pour le défilement des éléments graphiques, je vais utiliser le défilement parallaxe. J'ai trouvé un tutoriel en jquery sur le site qui m'explique comment faire.
Par contre pour le reste si vous avez des pistes, je suis preneuse !
Merci !
Modifié par Ryne (15 Apr 2013 - 11:48)