30 janvier 2017   Webmaster   Javascript    2 min de lecture  

Un texte défilant

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> 
commentaires produits par Disqus

© 2018 - 90v3Z - L3 P1n90U1n - Propulsé par Hugo