Vendre et promouvoir · Promotions et lancements

Bandeau défilant infini (Marquee) à double vitesse

Créez un ruban de texte ou de logos en défilement infini sans à-coup avec ralentissement dynamique au survol.

Débutant Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un intégrateur web spécialisé dans les animations CSS fluides et les bandeaux d'impact visuel pour sites vitrines.

Contexte

Je veux intégrer un bandeau défilant continu sur mon site [nom du site ou marque] pour afficher [liste des partenaires, technologies maîtrisées ou phrase manifeste répétée, ex: 'STRATÉGIE • MOTION • CODE • INTELLIGENCE ARTIFICIELLE']. Les couleurs sont [couleur du texte, couleur de fond ou bordures].

Tâche

Génère le code autonome (HTML et CSS pur optimisé GPU) d'un bandeau défilant infini horizontal (Marquee) parfaitement fluide à 60 images par seconde. Le ruban doit tourner en boucle sans aucun saut visuel lors de la réinitialisation, s'incliner légèrement (-2 degrés pour un effet dynamique de ruban adhésif) et ralentir doucement lorsque l'utilisateur le survole.

Format

Un fichier HTML autonome contenant la duplication transparente du contenu en flexbox et l'animation CSS basée exclusivement sur 'transform: translateX()'.

À remplacer avant de coller : [nom du site ou marque] · [couleur du texte, couleur de fond ou bordures]

Pourquoi ça marche mieux

Demande vague

« mets une bande de texte qui défile comme à la télé »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Structure technique du bandeau infini : - Deux conteneurs flexibles identiques alignés côte à côte à l'intérieur d'un wrapper à 'overflow: hidden'. - Animation CSS @keyframes : déplacement de 0% à -100% de la largeur du bloc. - Durée du cycle complet : 22 secondes (vitesse de lecture agréable). - Au survol (:hover) : 'animation-play-state: paused' ou transition vers une vitesse ralentie (45 secondes) avec fondu d'accélération. - Masque de fondu progressif aux extrémités gauche et droite grâce à un dégradé 'mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent)' pour éviter que le texte ne se coupe sèchement sur les bords de l'écran.

Pour améliorer la réponse, relancez

Crée une version à double bandeau croisé (l'un allant vers la gauche, l'autre vers la droite).
Remplace le texte par des logos de partenaires monochromes avec inversion de couleur au survol.

Conseil. N'utilisez jamais la vieille balise HTML obsolète <marquee> : utilisez toujours une structure flexbox CSS animée par transform, qui s'exécute directement sur la carte graphique sans surcharger le processeur.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite