Créer une animation interactive

Bonjour à toutes et tous,

Pour un site éducatif, j'aurais bien aimé savoir s'il est possible de proposer une animation intéractive qui permettrait de faire un choix de 4 ou 5 couleurs, d'une part, pour ensuite déplacer ce choix de couleur vers un cube (chaque face comporterait 9 petites cases à remplir au choix) ?

Le must serait de pouvoir déplacer vertical sur un axe le cube afin d'avoir accès aux 4 cotés.

Pensez-vous que ce genre d'animation puisse être faite avec du css ou du html5 , ou bien faut-il passer par un logiciel d'animation, ou de vectorisation ?

Merci aux participants

Salut,

je sais pas exactement quel genre d'animation tu veux faire, mais ça me semble faisable avec des éléments en drag and drop.

Ensuite je n'ai pas trop suivi comment ça a évolué le drag and drop html5. Je pense que tu dois pouvoir le faire en html5 de base, soit en utilisant du jquery, soit d'autres développement ici et la sur le net ^^.

De ce que j'en comprend, il faudrait les 4 ou 5 couleurs d'un coté qui seraient "dragable" , les cases d'une face de ton cube de l'autre coté qui seraient "dropable", et dans le même temps on pourrait imaginé que la face du cube soit "dragable" pour faire tourner le cube : si on drop vers une zone au dessus ça tourne dans un sens, si on drop vers une zone en dessous ça tourne dans l'autre sens et ça remplacerait la face du cube.

Salut Mathieu,

Merci de t'être penché sur le sujet.
Oui, le système que tu imagines est pas mal du tout, en drag and drop.

On pourrait même faire plus simple encore: juste le cube, pas de choix à gauche ou droite, on clique une fois sur une case du cube, une couleur apparaît, on clique encore dessus cette case, une autre apparaît, etc, et comme ça pour toutes les faces, sur un cube qui tourne sur son axe

salut,
le sujet m'a amusé, du coup je me suis fait plaisir.
C'est relativement simple à faire, avec tout ce que propose HTML5...
Si tu veux aller vers du pointu tu peux utiliser Tree.js mais bon, c'est vraiment la grosse artillerie.

Mais... mais c'est génial ce que tu as fait !! C'est exactement ça ! Alors là, chapeau, je suis bluffé ! Comment as-tu pocédé pour concrétiser le script ? Je voudrais bien avoir ce genre de facilité d'amusement, moi

Pour intégrer dans une page c'est compliqué ? Est-ce qu'avoir la possibilité de faire pivoter le cube également sur un axe horizontal c'est possible ?

Chapeau encore ! très bon boulot.

Merci. En fait, comme je l'ai dit précédemment, il n'y a rien de vraiment extraordinaire. Il faut commencer par construire un cube en HTML/CSS (tu trouveras pas mal de tutos en ligne), puis tu utilises un effet drag&drop (on parle bien de l'effet et non de l'API native) couplé à un peu de maths pour calculer le bon angle de rotation en fonction du déplacement de la souris sur un axe donné (abscisses / ordonnées). Pour les couleurs, tu utilises l'API native de drag&drop, où encore une fois c'est très simple (il y a aussi plein de tutos en ligne).

On peut très bien faire pivoter sur les deux axes et c'était même ce que j'avais fait. Par contre pour avoir une véritable rotation 3D libre, c'est un peu plus compliqué. Dans l'exemple que j'avais fait, on pouvait soit faire pivoter sur l'axe X soit sur le Y mais pas les deux en même temps.
Pour une rotation libre, il y a pas mal de choses à prendre en considération car le sens de rotation s'inverse si on passe à un angle de 180° sur l'axe des Y. Je te parle même de comment c'est pour inclure l'axe Z. Disons que c'est plus complexe pour une rotation totale et libre.

Je te laisse un vieux lien qui pourrait t'inspirer. En fait, il explique le principe mais ça sera tout de même à toi de finaliser le truc.
Le lien en question (en anglais).

Wow, chapeau bas.

Je trouvais le sujet sympa du coup je venais jeter un coup d'oeil pour voir comment ça avancé, c'est vraiment cool ce que tu as fait la

@ mathieu1004: Ouais, du très bon boulot !

Je suis allé voir le lien donné en anglais. le cube tourne de droite à gauche et de haut en bas, pile poil ce que je voulais. Bon, ça restequand même très technique et ce n'est pas donné au débutant que je suis

Pour modifier certains aspects du cube, notamment le nombre de facette par face, où faut-il intervenir précisément, Zelalsan ?

Salut,
pour ajouter/supprimer des petites cases à une ligne il faut ajouter/supprimer des balises <span></span>
pour ajouter/supprimer des lignes il faut ajouter des <div> qui vont contenir le nombre de span que tu veux.

J'ai fait une petite modif de son code pour montrer le principe : http://jsfiddle.net/tw6dqko1/1/

Bravo, vous êtes doués et réactifs les gars:)

Est-ce que toute forme (rectangle, triangle, etc) est possible en animation 3D comme ça, selon toi?

Merci à vous. Les formes en HTML/CSS seront assez limitées même s'il est toujours possible de bidouiller pour avoir la forme qu'on veut.

Comme je l'ai dit précédemment, si tu veux aller vers du plus pointu mieux vaut passer par un canvas. Tree js est l'arme absolue, tu peux voir ce qu'il est possible de faire. Comme tu peux voir, c'est magique !

Pour ce qui est de ton avant dernière question, mathieu1004 a parfaitement montré comment faire. On peut même ajouter des couleurs que l'on veut, il suffit de mettre des

<span draggable="true"></span>

dans la div#colors. Il suffit de donner la couleur en CSS et le tour est joué.
Un exemple mis à jour (bon des couleurs un peu au piff).