Bonsoir, pour les besoins d'un projet je dois réaliser un "slider" qui reprend ce que font certains programmes télévisés, notamment les chaines d'informations.

Voici une image pour illustrer mes propos

Les messages donc les pseudos doivent défiler avec une animation, mais je ne vois pas comment réaliser l'effet escompté :x
Si vous avez des idées à me soumettre, je suis preneur.

D'avance merci.

2 réponses


Bonjour,
tu as un exemple se site qui utilise le principe.
Car je vois pas trop ce que tu veux faire

ze0ne
Auteur

Bonsoir, non je n'ai aucun exemple malheureusement.

Je vais essayer d'expliquer le plus clairement possible.

En fait, le pseudo sur fond rouge, correspond à la citation "vient de commenter...", le message devra être visible pendant quelques secondes, puis une transition sera effectuée. Le "bloc rouge" devra sortir du cadre par la gauche, et le premier "pseudo suivant", devra prendre place à l’extrême gauche, sur fond rouge avec la encore une transition et également affiché la citation qui correspond au pseudo actif.

Pour le moment, j'ai procédé de la façon suivante.

Une div global, de la taille de l'image avec un background image.
A l'intérieur de celle ci, une seconde div, qui représente la partie rouge sur cette image

Puis un "ul" en "display: inline-block".

Chaque pseudo correspond à un "li" auquel j'ai appliqué un multi background en css3.

A partir de la, visuellement j'ai le résultat attendu, mais la où je suis bloqué, c'est au niveau de l'animation.

Je ne débute pas en jQuery, donc ça ne devrai pas me poser de problème, je souhaiterai juste avoir un piste ou quelques astuces pour mener à bien ce projet.

Je partagerai le résultat si je parviens à le réaliser seul.