1448 sujets

Web Mobile et responsive web design

Salut

J'ai crée un site web à l'adresse: ici

Je désire modifier la couleur du texte d'information (gris) du bandeau défilant qui est un script pour que le texte soit plus visible (en noir) pour les mobiles.

Comment puis-je faire en respectant les validations?

<!-- 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>
         <canvas id="defilant" width = '2000' height = '100'></canvas> 
<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('Bienvenue sur le site de l\'Académie d\'AïkiTaïso de la Côte d\'Azur ',x, y); }
</script>
		</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;
}
}

Modifié par kercroam (11 May 2018 - 21:26)
Salut, il faut simplement contextualiser ton script. Smiley cligne
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)