Modifier couleur du texte pour bandeau défilant

Salut, il faut simplement contextualiser ton script.
Vu que tu veux utiliser 1025px pour ton breakpoint, on peut faire pareil ici :

<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.lineWidth = 1; // épaisseur du trait
var x = X ; y = 50; setInterval(deplacement,20) ; // vitesse de déplacement
function deplacement() {
    if (document.body.clientWidth < 1025) // Quand l'écran est plus petit que 1025px
        contexte.strokeStyle ='#000'; //couleur du texte défilant (noir);
    else
        contexte.strokeStyle ='#888'; //couleur du texte défilant (gris);
    contexte.clearRect(0,0,X,Y); x = x-2 ; if(x <-750) x = X ;
    contexte.strokeText('Bienvenue sur le site de l\'Académie d\'AïkiTaïso de la Côte d\'Azur ',x, y); }
</script>

Je trouve que manipuler du canvas avec javascript, c'est du super lourd.
A chaque cycle, on force le navigateur à recalculer l'image.
De plus, l'écran reste vide pendant un certian temps, c'est stressant.

On peut remplacer tout cela avec une animation en CSS3 :
https://codepen.io/bazooka07/pen/vjjbQP

Pour éviter un blanc, on double le message à afficher.

Merci à tous les deux pour votre réponse.

J'ai utilisé ta méthode bazooka07, ça fonctionne .
Modifié par kercroam (12 May 2018 - 18:11)

Par contre comment faire pour indiquer qu'une ligne et non deux lignes pour le mobile car le texte est trop près. Si possible en css.

<!-- L'en-tête -->
        <header>
		 <div id="conteneur_de_banniere" class="centrer"> <img src="images/banniere_centrale.jpg" alt="banniere_centrale" height="214" width="814"/> </div>
         
<div id="banner">
  <span>Bienvenue sur le site de l'Académie d'AïkiTaïso de la Côte d'Azur</span>
  <span>Bienvenue sur le site de l'Académie d'AïkiTaïso de la Côte d'Azur</span>
</div>
		</header>

/* Nouvelles règles si la fenêtre fait au plus 1025px de large */
@media screen and (max-width: 1025px)

{	
body
{width: 100%;
}

    
 nav ul{
 padding-left:0;
 }
 
 #menu a{
font-size:1.7em;
padding:28px 20px 28px 20px;
font-weight: bold;
} 	

#bouton_haut_de_page a{
padding:15px 20px;
font-size:2.1em;}

p {color:black;}


section {
font-size:2.1em;
width: 100%;
}
    /* ceci est mon en-tete */
	
#conteneur_de_banniere {
padding:20px;
margin: auto;
}

 /* texte défilant */
 
#banner {
height:2.2rem;
}

 span
{font-size:2.0em;
}


}

Modifié par kercroam (12 May 2018 - 18:25)

Il vaut mieux garder les 2 <spans>. Cela évite d'avoir un blanc à l'écran.
Le problème que l'écran d'un smartphone n'est pas assez grand pour afficher tout ton texte sur une seule ligne.

J'ai corrigé le codepen pour faire passer ton texte.
Reprends les règles CSS.
Respecte bien les espaces dans l'expression avec calc()
Tu as une démo en live ici :
https://kazimentou.fr/divers/PluXml/banner.html
Le bandeau s'adapte selon la largeur de l'écran :
smartphone 5.55" en mode portrait
smartphone 5.55" en mode paysage
PC
Ajuste la valeur de la variable --banner-width si besoin

Merci pour ton aide bazooka07
Ok j'ai rien modifié pour le fichier html, par contre je n'ai pas mis encore en ligne le css car le validateur css indique des erreurs, même sur ta démonstration.
J'espère que j'ai copié tout correctement dans le css.

/* Nouvelles règles si la fenêtre fait au plus 1025px de large */
@media screen and (max-width: 1025px)

{	
body
{width: 100%;
font-size: 16pt;
font-family: 'Noto Sans', Arial, Sans-Serif;
			--banner-width : 200%;
}

    
 nav ul{
 padding-left:0;
 }
 
 #menu a{
font-size:1.7em;
padding:28px 20px 28px 20px;
font-weight: bold;
} 	

#bouton_haut_de_page a{
padding:15px 20px;
font-size:2.1em;}

p {color:black;}


section {
font-size:2.1em;
width: 100%;
}
    /* ceci est mon en-tete */
	
#conteneur_de_banniere {
padding:20px;
margin: auto;
}

 /* texte défilant */
 
#banner {
height:2.2rem;
}

 span
{font-size:2.0em;
}

/* Nouvelles règles pour bandeau défilant */
@media screen and (min-width: 64rem) {
			body { --banner-width: 100%; }
		}
		@keyframes marqueelike {
			0%, 100% { margin-left: 0; }
			99.99% { margin-left: calc(var(--banner-width) * -1); }
		}
		.banner {
			position: relative; width: 100%; height: 2.5rem;
			overflow: hidden; background-color: wheat;
		}
		.banner > span {
			position: absolute; min-width: 100%; display: inline-block;
			white-space: nowrap; padding-top: 0.3rem;
			animation: linear marqueelike 30s infinite;
		}
		.banner > span:first-of-type { left: 0; color: firebrick; }
		.banner > span:nth-of-type(2) { left: var(--banner-width); }


}

Modifié par kercroam (13 May 2018 - 10:25)

Le validateur du W3C ne prend encore en compte les variables CSS3.
Un issue et un PR sont déposés sur Github depuis fin mars:
https://github.com/w3c/css-validator/issues/111
https://github.com/w3c/css-validator/pulls

Pour lui faire passer le truc il faut abandonner les variables et mettre un peu plus de règles
https://kazimentou.fr/divers/PluXml/banner2.html
On peut ajuster la vitesse de défilement selon la taille des medias

Merci pour les infos