On utilisait la balise <marquee> ; elle est désormais obsolète et doit être remplacée par la balise <canvas>.

Déplacement d’un texte dans un bandeau avec canvas 

Fonctionnement 

Il faut utiliser un script simple pour le défilement : les explications sont dans les commentaires.

Le script 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script>
var canevas = document.querySelector('canvas'); 
var contexte = canevas.getContext('2d'); 
var X = canevas.width ; 
var Y = canevas.height; 
contexte.textAlign ='left'; 
contexte.textBaseline = 'middle'; 
contexte.font = " bold italic 60px arial" ; // style de police
contexte.strokeStyle ='#888'; //couleur du texte défilant (gris)
contexte.lineWidth = 1; // épaisseur du trait
var x = X ; y = 50; setInterval(deplacement,20) ; // vitesse de déplacement
function deplacement() { contexte.clearRect(0,0,X,Y); x = x-2 ; if(x <-750) x = X ; 
contexte.strokeText('Le pingouin des @lpes',x, y); }
</script>

Le css 

Il permet d’obtenir une canvas responsive.

1
2
3
4
5
6
7
canvas {
  background-image : linear-gradient(90deg, #eee, #ccc );
}
#defilant {
  width: 100%;
  height: auto;
}

Le code Html 

<canvas id="defilant" width = '700' height = '100'></canvas>