Discussion :

[Vidamuerte]

Bonjour,

Je viens demander de l'aide pour un problème que je n'arrive pas à résoudre et je ne trouve d'informations nul part.

Je développe actuellement une application en HTML/CSS/JS que je fais tourner sur Chrome. Jusque là pas de problème.
Pour faire court, le but est de faire défiler de gauche à droite des polaroids infiniment (une fois arrivé à droite on le recharge à gauche). Quand on clique sur un polaroid, il s'arrête.

Les animations et actions sont faites. Les div se déplacent bien grace à des transform : translate (j'utilise également la lib Transit : http://ricostacruz.com/jquery.transit/) . J'ai juste une problème, j'ai beau cliquer sur mes polaroids, ils s’arrêtent une fois sur 3. Et j'ai compris la cause du problème, les "zones actives" de mes div ne se déplacent pas au même rythme que ces div eux même, que leur "visuel".

Ici, la zone bleu correspond au polaroid avec la planète :


Quelqu'un a t il déjà rencontré ce genre de problème et si oui, l'a t il résolu?
J'ai déjà rencontré un problème similaire avec des dashboard que je faisais bouger avec des translateX. Le problème me semble donc bien venir de cette propriété CSS

Merci d'avance.

[Torgar]

Bonjour,

Il nous faudra ton HTML généré et ton CSS pour que nous puissions t'aider.

[Invité]

...Et j'ai compris la cause du problème, les "zones actives" de mes div ne se déplacent pas au même rythme que ces div eux même, que leur "visuel"...

Puisque tu as mis le doigt sur l'origine du problème, tu devrais savoir où chercher.

D'après ce que tu as expliqué, c'est essentiellement un script JavaScript.

Il se peut que l'image elle-même et la "zone réactive" (en bleu) sont 2 éléments distincts, animés séparéments.
Il faut voir comment ils sont créés et animés, et si possible les synchroniser (au moins comprendre pourquoi ils ne le sont pas).