Como alterar a cor dinamicamente durante a rolagem com CSS

Com elementos estacionários do site, como logotipos, muitas vezes você se depara com uma mistura de cores ao rolar a página. Isso pode acontecer se o elemento estático passar por uma seção do site que compartilhe a mesma cor com o elemento. O elemento estático ficará invisível enquanto estiver sobre esse plano de fundo.

Para corrigir esse problema, você precisa inverter dinamicamente a cor do logotipo quando ele passar por cima de um elemento com a mesma cor. Aprenda como conseguir esse efeito usando apenas CSS, sem a necessidade de JavaScript!

Baixe o Código Inicial

Para seguir este tutorial, baixe o código inicial de seu Repositório GitHub para sua máquina local.

Abrir index.html em um navegador que deve se parecer com a página mostrada aqui:

A página HTML contém um logotipo e quatro seções. Cada seção tem um título fictício e três parágrafos de texto fictício. O texto do logotipo é da mesma cor preta do plano de fundo da segunda e quarta seções. Este efeito vem do

enésimo-filho (par) bloquear em estilos.css, que aplica o plano de fundo preto a seções pares.

Fazendo o logotipo pegajoso

Com este código inicial, o logotipo não fica preso ao topo. Isso significa que o logotipo desaparece quando você rola a página. Você pode transformar seu logotipo em um cabeçalho fixo aplicando o posição: pegajoso propriedade a ele dentro do arquivo CSS. Para um mergulho profundo no posicionamento em CSS, leia nosso post no propriedade de posição CSS.

Certifique-se de que o logotipo grude no topo, mas apenas em telas maiores (porque, em tamanhos de tela menores, ele pode passar por cima de outros elementos). A seguir Consulta de mídia responsiva em HTML cria este efeito:

@meios de comunicação(largura > 980px) {
.logotipo { 
posição: pegajoso; 
principal: .5rem; 
 }
}

Agora, o logotipo ficará no topo o tempo todo e seguirá você enquanto você rola. Mas você também notará que o texto desaparece quando você rola para as seções de fundo escuro (porque o texto do logotipo também é preto). Agora dê uma olhada em como corrigir isso.

Adicionando o modo mix-blend ao seu Sticky Header

Para garantir que o logotipo preto não desapareça em fundos pretos, você precisará inverter a cor dinamicamente. A maneira como você faria isso é usando o misturar-misturar-modo propriedade CSS e atribuindo a ela um valor de diferença:

@meios de comunicação(largura > 980px) { 
.logotipo { 
posição: pegajoso; 
principal: .5rem; 
misturar-misturar-modo: diferença
 }
}

A propriedade CSS mix-blend-mode especifica como o conteúdo de um elemento deve ser mesclado com o conteúdo do pai do elemento e seu plano de fundo. O valor diferente leva o valor da diferença de cada pixel, invertendo as cores claras. Portanto, se os valores das cores forem iguais, elas se tornarão pretas. As diferenças nos valores serão invertidas.

A adição de CSS acima fará com que o logotipo desapareça completamente. Isso ocorre porque você não definiu a cor do texto do logotipo como branco fora da consulta de mídia. Faça isso com o seguinte código:

.logotipo { 
cor: branco; 
/* Outras propriedades CSS */
}

Agora você configurou tudo com sucesso. Role a página para baixo e para o fundo preto. Você veria o logotipo mudando de preto para branco.

Você também pode trabalhar com outras cores além do preto e branco. Por exemplo, se você alterar a cor do texto do logotipo para azul-petróleo (#008080), obterá a cor rosa em fundos brancos. A imagem a seguir ilustra isso.

Na maioria dos casos, você deseja que seu elemento seja branco para obter os melhores resultados. Além disso, se você rolar até o topo, poderá encontrar seu logotipo cortado ao meio. Isso acontece porque o logotipo existe fora do elemento. Para mostrar o logotipo completo, você precisa definir a cor de fundo do elemento para branco.

Usando uma imagem como logotipo em vez de texto

Essa técnica não funciona apenas com texto, mas também com imagens. Obviamente, você precisa usar uma imagem branca como logotipo. O exemplo a seguir usa um logotipo lorem ipsum branco que está na mesma pasta que o index.html arquivo:

<imgorigem="loremipsum-297.svg"alternativo="Logo Lorem Ipsum">

A imagem aqui utilizada é um SVG (Scalable Vector Graphic), um tipo de arquivo vetorial.

Agora a cor da imagem do seu logotipo será preto sobre fundo branco, conforme mostrado na imagem abaixo.

Mas se você rolar para um fundo preto, a cor do logotipo ficará branca automaticamente. Você pode ver isso na imagem abaixo.

Você também pode aumentar o tamanho do logotipo substituindo tamanho da fonte com altura e largura no bloco CSS direcionado ao logotipo. Afinal, agora você está lidando com uma imagem em vez de texto.

.logotipo {
cor: branco;
largura: 10rem;
/* Outras propriedades CSS */
}

Se você diminuir a tela, a consulta de mídia não será mais aplicada. Isso desativará os diferentes modos de mesclagem, fazendo com que seu logotipo desapareça. Para trazer o logotipo de volta para a página, você precisa definir o misturar-misturar-modo propriedade no logotipo fora da consulta de mídia:

.logotipo {
cor: branco;
largura: 10rem;
misturar-misturar-modo: diferença;
/* Outras propriedades CSS */
}

Isso ativará a mistura de mixagem no logotipo o tempo todo, mesmo em telas maiores. Mas em telas pequenas, o logotipo permanecerá no topo e não seguirá você enquanto você rola para baixo (porque posição: pegajoso funciona apenas em telas grandes). Por fim, lembre-se sempre de usar um logotipo branco para evitar que ele desapareça da página.

Saiba mais dicas e truques de CSS

Ao usar o modo mix-blend, você pode criar layouts fascinantes com cores alternadas. Melhor ainda, você não precisa codificar nenhuma cor ou definir pontos de interrupção porque o modo mix-blend inverterá a cor dinamicamente. Ele permite criar misturas e cores agradáveis ​​para partes do conteúdo de um elemento, dependendo de seu plano de fundo direto.

CSS é muitas vezes considerado como uma das linguagens mais emocionantes para aprender. Isso ocorre em parte porque o CSS está cheio de dicas e truques como o que você acabou de aprender neste artigo. Algumas outras dicas e truques úteis de CSS são efeitos de foco, redimensionamento de imagens para caber em contêineres, truncamento de texto com elipses e uso de transformação de texto.