Effet Slide Circle ( jquery, html5, CSS3 )

Bonjour à tous,

Je viens vers vous car je suis en train d'essayer de réaliser un effet en HTML5/CSS3/JQUERY de mouvement circulaire ou des cercles passent les uns au-dessus des autres et affiche une information chacun leur tour..

Je vous cache pas que je suis pas très bon en développement et je ne sais pas trop comment m'y prendre.. Si des personnes arrivent à me donner un coup de pouces, je vous en serrais très reconnaissant

je vous mets une image pour que vous vous fassiez une meilleure image de l'animation.

Merci d'avance à tous !!

Bonjour,

bien sûr nous pouvons t'aider, mais ça dépend de ton niveau qui est dur a évaluer par "pas très bon".

Arrives-tu à faire de simples animations avec jQuery?
Si non commences par là.

Quant à ton problème, je décèle déjà un problème que ton schéma (bonne procédure soit dit en passant que d'en faire un) révèle.

Le disque bleu est au départ sous le rouge, puis par dessus. Comment la transition se fera visuellement? D'un coup? au début/milieu/fin de l'animation (tip: répondre milieu va compliquer l'affaire ^^). Sont-ils un moment tous bien séparés?

Comment s'effectue la rotation, précisément et géométriquement parlant. Centres de rotations, angles, etc.

De toute manière c'est assez lourd sans expérience solide (et même avec), peut-être existe-t-il une manière plus ingénieuse de réaliser un autre effet beaucoup plus simple et qui pourrait mieux correspondre/avoir plus d'impact.

Une fois ces points résolus, il sera temps d'aller en quête d'éventuels plugins jQuery qui pourraient convenir à la situation, ou/et mettre la main à la pâte, ressortir son manuel de trigo et faire des cos/sin/tan

Oui tu as raison, peut-être faut-il partir sur quelques choses de plus simple..

L'idée était vraiment d'effectuer des petites animations ( toujours les mêmes ) suivant la position des éléments.

L'élément en haut ( rouge ici ) à le z-index le plus important pour être au-dessus des autres, et l'élément à gauche ( en bleu ) à lui le plus faible. Cependant au moment de l'animation de rotation, l'élément rouge passe en dernier avec le z-index le plus faible et le bleu passe avant dernier au niveau des z-index donc il est au dessus.

Il peut y avoir un petit croisement entre les deux, c'est pas vraiment grave, mais pour éviter ça je pensais réaliser un écartement par rapport au centre de rotation pour cacher le changement de z-index au moment de la rotation et du redimensionnement... enfin rien de compliqué comme tu l'auras compris

Merci en tout cas pour ton aide.