Come cambiare dinamicamente il colore durante lo scorrimento con i CSS

Con elementi fissi del sito Web come i loghi, ti imbatterai spesso in una confusione di colori durante lo scorrimento della pagina. Ciò può accadere se l'elemento statico va su una sezione del sito Web che condivide lo stesso colore con l'elemento. L'elemento statico sarà invisibile mentre poggia su quello sfondo.

Per risolvere questo problema, è necessario invertire dinamicamente il colore del logo quando passa sopra un elemento con lo stesso colore. Scopri come ottenere questo effetto usando solo CSS, senza JavaScript richiesto!

Scarica il codice di avviamento

Per seguire questo tutorial, scarica il codice di avviamento dal suo Deposito GitHub alla tua macchina locale.

Aprire indice.html in un browser che dovrebbe assomigliare alla pagina mostrata qui:

La pagina HTML contiene un logo e quattro sezioni. Ogni sezione ha un titolo fittizio e tre paragrafi di testo fittizio. Il testo del logo è dello stesso colore nero dello sfondo della seconda e della quarta sezione. Questo effetto deriva dal

ennesimo figlio (pari) bloccare styles.css, che applica lo sfondo nero alle sezioni pari.

Rendere il logo appiccicoso

Con questo codice iniziale, il logo non si attacca in alto. Ciò significa che il logo scompare quando si scorre la pagina. Puoi trasformare il tuo logo in un'intestazione adesiva applicando il posizione: appiccicoso proprietà ad esso all'interno del file CSS. Per un approfondimento sul posizionamento nei CSS, leggi il nostro post su Proprietà posizione CSS.

Assicurati che il logo aderisca alla parte superiore, ma fallo solo su schermi più grandi (perché, con schermi di dimensioni inferiori, potrebbe sovrapporsi ad altri elementi). Il seguente Query multimediale reattiva HTML crea questo effetto:

@media(larghezza > 980 pixel) {
.logo { 
posizione: appiccicoso; 
superiore: .5rim; 
 }
}

Ora il logo rimarrà sempre in alto e ti seguirà mentre scorri. Ma noterai anche che il testo scompare quando scorri nelle sezioni dello sfondo scuro (perché anche il testo del logo è nero). Ora dai un'occhiata a come risolvere questo problema.

Aggiunta della modalità mix-blend alla tua intestazione adesiva

Per garantire che il logo nero non scompaia su sfondi neri, dovrai invertire il colore in modo dinamico. Il modo in cui lo faresti è usando il file modalità mix-blend Proprietà CSS e assegnandole un valore di differenza:

@media(larghezza > 980 pixel) { 
.logo { 
posizione: appiccicoso; 
superiore: .5rim; 
modalità mix-blend: differenza
 }
}

La proprietà CSS mix-blend-mode specifica come il contenuto di un elemento deve fondersi con il contenuto del genitore dell'elemento e il suo sfondo. Il diverso valore prende il valore di differenza di ogni pixel, invertendo i colori della luce. Quindi, se i valori del colore sono gli stessi, diventano neri. Le differenze nei valori si invertiranno.

L'aggiunta CSS di cui sopra farà scomparire completamente il logo. Questo perché non hai impostato il colore del testo del logo su bianco al di fuori della media query. Fallo con il seguente codice:

.logo { 
colore: bianco; 
/* Altre proprietà CSS */
}

Ora hai impostato correttamente tutto. Scorri la pagina verso il basso e nello sfondo nero. Vedresti il ​​logo passare dal nero al bianco.

Puoi anche lavorare con altri colori oltre al bianco e nero. Ad esempio, se dovessi cambiare il colore del testo del tuo logo in colore verde acqua (#008080), otterrai il colore rosa su sfondi bianchi. L'immagine seguente lo illustra.

Nella maggior parte dei casi, vorresti che il tuo elemento fosse bianco per ottenere i migliori risultati. Inoltre, se scorri verso l'alto, potresti trovare il tuo logo tagliato a metà. Questo accade perché il logo esiste al di fuori del file elemento. Per mostrare il logo per intero, è necessario impostare il colore di sfondo del elemento al bianco.

Utilizzo di un'immagine come logo al posto del testo

Questa tecnica non funziona solo con il testo, ma anche con le immagini. Ovviamente, devi assicurarti di utilizzare un'immagine bianca come logo. L'esempio seguente utilizza un logo lorem ipsum bianco che si trova nella stessa cartella del file indice.html file:

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

L'immagine utilizzata qui è un SVG (Scalable Vector Graphic), un tipo di file vettoriale.

Ora il colore dell'immagine del tuo logo sarà nero su sfondo bianco come mostrato nell'immagine qui sotto.

Ma se scorri su uno sfondo nero, il colore del logo diventerà automaticamente bianco. Puoi vederlo nell'immagine qui sotto.

Puoi anche aumentare le dimensioni del logo sostituendolo dimensione del font con altezza E larghezza nel blocco CSS che ha come target il logo. Dopotutto, ora hai a che fare con un'immagine piuttosto che con un testo.

.logo {
colore: bianco;
larghezza: 10rem;
/* Altre proprietà CSS */
}

Se rimpicciolisci lo schermo, la media query non verrà più applicata. Questo disattiverà le diverse modalità di fusione, facendo scomparire il tuo logo. Per riportare il logo sulla pagina, è necessario impostare il file modalità mix-blend proprietàsul logo al di fuori della media query:

.logo {
colore: bianco;
larghezza: 10rem;
modalità mix-blend: differenza;
/* Altre proprietà CSS */
}

Questo attiverà sempre il mix blending sul logo, anche su schermi più grandi. Ma su schermi piccoli, il logo rimarrà in alto e non ti seguirà mentre scorri verso il basso (perché posizione: appiccicoso funziona solo su grandi schermi). Infine, ricorda sempre di utilizzare un logo bianco per evitare che scompaia dalla pagina.

Ulteriori informazioni Suggerimenti e trucchi CSS

Utilizzando la modalità mix-blend, puoi creare layout affascinanti con colori alternati. Meglio ancora, non è necessario codificare alcun colore o impostare punti di interruzione perché la modalità mix-blend invertirà il colore in modo dinamico. Ti consente di creare piacevoli miscele e colori per parti del contenuto di un elemento a seconda del suo sfondo diretto.

I CSS sono spesso considerati uno dei linguaggi più entusiasmanti da imparare. Ciò è in parte dovuto al fatto che i CSS sono pieni di suggerimenti e trucchi come quello che hai appena appreso in questo articolo. Alcuni altri utili suggerimenti e trucchi CSS sono gli effetti al passaggio del mouse, il ridimensionamento delle immagini per adattarle ai contenitori, il troncamento del testo con ellissi e l'utilizzo della trasformazione del testo.