Faire défiler un texte dans un bandeau, 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
<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.
canvas {
background-image : linear-gradient(90deg, #eee, #ccc );
}
#defilant {
width: 100%;
height: auto;
}
Le code Html
<canvas id="defilant" width = '700' height = '100'></canvas>