Comment changer dynamiquement de couleur pendant le défilement avec CSS

Avec les éléments fixes d’un site web tels que les logos, vous rencontrerez souvent un problème de confusion des couleurs lors du défilement de la page. Cela peut se produire si l’élément statique passe au-dessus d’une section du site web qui partage la même couleur que l’élément. L’élément statique sera invisible lorsqu’il reposera sur cet arrière-plan.

Pour résoudre ce problème, vous devez inverser dynamiquement la couleur du logo lorsqu’il passe au-dessus d’un élément de la même couleur. Découvrez comment obtenir cet effet en utilisant uniquement du CSS, sans JavaScript !

Télécharger le code de démarrage

Ouvrir index.html dans un navigateur qui devrait ressembler à la page montrée ici :

La page HTML contient un logo et quatre sections. Chaque section a un titre fictif et trois paragraphes de texte fictif. Le texte du logo est de la même couleur noire que l’arrière-plan des deuxième et quatrième sections. Cet effet provient de l’outil nth-child(even) bloc en styles.cssqui applique le fond noir aux sections paires.

Rendre le logo collant

Avec ce code de démarrage, le logo n’est pas collé en haut de la page. Cela signifie que le logo disparaît lorsque vous faites défiler la page vers le bas. Vous pouvez transformer votre logo en un en-tête collant en appliquant le code de démarrage position : sticky dans le fichier CSS. Pour en savoir plus sur le positionnement en CSS, lisez notre article sur la propriété CSS position.

Veillez à ce que le logo soit placé en haut, mais uniquement sur les écrans de grande taille (car, sur les écrans de petite taille, il pourrait dépasser d’autres éléments). La requête média HTML responsive suivante permet d’obtenir cet effet :

 @media(width > 980px) {
  .logo { 
    position: sticky; 
    top: .5rem; 
  }
}
 

Désormais, le logo restera toujours en haut de l’écran et vous suivra lorsque vous ferez défiler la page. Mais vous remarquerez également que le texte disparaît lorsque vous faites défiler les sections à fond sombre (parce que le texte du logo est également noir). Voyons maintenant comment remédier à ce problème.

Ajouter le mode mix-blend à votre en-tête autocollant

Pour que le logo noir ne disparaisse pas sur un fond noir, vous devez inverser la couleur de manière dynamique. Pour ce faire, vous pouvez utiliser la fonction mode-mélange et lui assigner une valeur de différence :

 @media(width > 980px) { 
  .logo { 
    position: sticky; 
    top: .5rem; 
    mix-blend-mode: difference 
  }
}
 

La propriété CSS mix-blend-mode spécifie comment le contenu d’un élément doit se fondre avec le contenu du parent de l’élément et son arrière-plan. La valeur different prend la valeur de la différence de chaque pixel, en inversant les couleurs claires. Ainsi, si les valeurs des couleurs sont identiques, elles deviennent noires. Les différences de valeurs s’inversent.

L’ajout CSS ci-dessus fera disparaître complètement le logo. Cela est dû au fait que vous n’avez pas défini la couleur du texte du logo en blanc en dehors de la requête média. Faites-le avec le code suivant :

 .logo { 
  color: white; 
  /* Other CSS properties */
}
 

Vous avez maintenant tout configuré avec succès. Faites défiler la page vers le bas et dans l’arrière-plan noir. Vous verrez le logo passer du noir au blanc.

Vous pouvez également travailler avec d’autres couleurs que le noir et le blanc. Par exemple, si vous changez la couleur du texte de votre logo en couleur sarcelle (#008080), vous obtiendrez la couleur rose sur fond blanc. L’image suivante illustre ce phénomène.

Dans la plupart des cas, il est préférable que votre élément soit blanc pour obtenir les meilleurs résultats. Par ailleurs, si vous faites défiler la page jusqu’en haut, il se peut que votre logo soit coupé en deux. Cela est dû au fait que le logo se trouve à l’extérieur de l’élément <section&gt ; élément. Pour afficher le logo en entier, vous devez définir la couleur d’arrière-plan de l’élément <body&gt ; élément à blanc.

Utiliser une image comme logo au lieu d’un texte

Cette technique ne fonctionne pas seulement avec du texte, mais aussi avec des images. Bien entendu, vous devez vous assurer d’utiliser une image blanche comme logo. L’exemple suivant utilise un logo lorem ipsum blanc qui se trouve dans le même dossier que le fichier index.html fichier :

 <img src="loremipsum-297.svg" alt="Lorem Ipsum Logo">
 

La couleur de l’image de votre logo sera noire sur fond blanc, comme le montre l’image ci-dessous.

Mais si vous faites défiler l’écran sur un fond noir, la couleur du logo devient automatiquement blanche. Vous pouvez le voir dans l’image ci-dessous.

Vous pouvez également augmenter la taille du logo en remplaçant font-size avec hauteur et largeur dans le bloc CSS ciblant le logo. Après tout, il s’agit d’une image et non plus d’un texte.

 .logo {
  color: white;
  width: 10rem;
  /* Other CSS properties */
}
 

Si vous réduisez l’écran, la requête média ne s’appliquera plus. Cela désactivera les différents modes de fusion, ce qui fera disparaître votre logo. Pour faire réapparaître le logo sur la page, vous devez définir la propriété mode-mélange propriété sur le logo en dehors de la requête média :

 .logo {
  color: white;
  width: 10rem;
  mix-blend-mode: difference;
  /* Other CSS properties */
}
 

Cela activera le mélange sur le logo à tout moment, même sur les grands écrans. Mais sur les petits écrans, le logo restera en haut et ne vous suivra pas lorsque vous défilerez vers le bas (parce que position:sticky ne fonctionne que sur les grands écrans). Enfin, n’oubliez pas d’utiliser un logo blanc pour éviter qu’il ne disparaisse de la page.

En savoir plus sur les conseils et astuces CSS

En utilisant le mode mix-blend, vous pouvez créer des mises en page fascinantes avec des couleurs alternées. Mieux encore, vous n’avez pas besoin de coder en dur une couleur ou de définir des points de rupture, car le mode mix-blend inversera la couleur de manière dynamique. Il vous permet de créer des mélanges et des couleurs agréables pour certaines parties du contenu d’un élément en fonction de son arrière-plan direct.

CSS est souvent considéré comme l’un des langages les plus passionnants à apprendre. Cela s’explique en partie par le fait que CSS regorge de trucs et astuces comme celui que vous venez d’apprendre dans cet article. Parmi les autres trucs et astuces CSS, citons les effets de survol, le redimensionnement des images pour les faire entrer dans des conteneurs, la troncature du texte à l’aide d’ellipses et l’utilisation de la transformation de texte.