Dynamisch van kleur veranderen tijdens het scrollen met CSS

Met stationaire website-elementen zoals logo's, kom je vaak een kleurenverwarring tegen als je door de pagina scrolt. Dit kan gebeuren als het statische element over een gedeelte van de website gaat dat dezelfde kleur heeft als het element. Het statische element zal onzichtbaar zijn terwijl het op die achtergrond rust.

Om dit probleem op te lossen, moet u de kleur van het logo dynamisch omkeren wanneer het over een element met dezelfde kleur gaat. Leer hoe u dit effect kunt bereiken met alleen CSS, zonder JavaScript!

Download de starterscode

Om deze tutorial te volgen, downloadt u de startercode van its GitHub-opslagplaats naar uw lokale computer.

Open index.html in een browser die eruit zou moeten zien als de hier getoonde pagina:

De HTML-pagina bevat een logo en vier secties. Elke sectie heeft een dummy-titel en drie alinea's met dummy-tekst. De tekst van het logo heeft dezelfde zwarte kleur als de achtergrond van het tweede en vierde deel. Dit effect komt van de

n-kind (even) blok in stijlen.css, waarmee de zwarte achtergrond wordt toegepast op even secties.

Het logo plakkerig maken

Met deze starterscode blijft het logo niet bovenaan plakken. Dit betekent dat het logo verdwijnt als je naar beneden scrolt. U kunt uw logo in een plakkerige koptekst veranderen door de positie: plakkerig eigenschap eraan toe in het CSS-bestand. Voor een uitgebreide duik in positionering in CSS, lees ons bericht over de CSS-positie-eigenschap.

Zorg ervoor dat het logo bovenaan blijft plakken, maar doe dit alleen op grotere schermen (omdat het bij kleinere schermformaten over andere elementen kan gaan). Het volgende HTML-responsieve mediaquery creëert dit effect:

@media(breedte > 980px) {
.logo { 
positie: kleverig; 
bovenkant: .5rem; 
 }
}

Nu blijft het logo altijd bovenaan staan ​​en volgt het je terwijl je scrolt. Maar je zult ook merken dat de tekst verdwijnt als je naar de donkere achtergrondsecties scrolt (omdat de logotekst ook zwart is). Bekijk nu hoe u dit kunt oplossen.

Mix-blend-modus toevoegen aan uw Sticky Header

Om ervoor te zorgen dat het zwarte logo niet verdwijnt op zwarte achtergronden, moet u de kleur dynamisch omkeren. De manier waarop u dit doet, is door de mix-blend-modus CSS-eigenschap en wijs er een waarde aan toe verschil:

@media(breedte > 980px) { 
.logo { 
positie: kleverig; 
bovenkant: .5rem; 
mix-blend-modus: verschil
 }
}

De CSS-eigenschap mix-blend-mode specificeert hoe de inhoud van een element moet versmelten met de inhoud van het bovenliggende element en de achtergrond ervan. De verschillende waarde neemt de verschilwaarde van elke pixel, waardoor de lichtkleuren worden omgekeerd. Dus als de kleurwaarden hetzelfde zijn, worden ze zwart. Verschillen in de waarden worden omgekeerd.

Door de bovenstaande CSS-toevoeging zal het logo volledig verdwijnen. Dit komt omdat u buiten de mediaquery de kleur van de logotekst niet op wit hebt ingesteld. Doe dat met de volgende code:

.logo { 
kleur: wit; 
/* Andere CSS-eigenschappen */
}

Nu heb je alles succesvol ingesteld. Scroll naar beneden op de pagina en in de zwarte achtergrond. Je zou het logo zien veranderen van zwart naar wit.

Je kunt naast zwart en wit ook met andere kleuren werken. Als u bijvoorbeeld de kleur van uw logotekst zou wijzigen in groenblauw (#008080), krijgt u de kleur roze op witte achtergronden. De volgende afbeelding illustreert dit.

In de meeste gevallen wilt u dat uw element wit is om de beste resultaten te krijgen. Als u naar boven scrolt, ziet u mogelijk uw logo in tweeën gesneden. Dit gebeurt omdat het logo buiten de element. Om het logo volledig weer te geven, moet u de achtergrondkleur van het logo instellen element naar wit.

Een afbeelding gebruiken als logo in plaats van tekst

Deze techniek werkt niet alleen met tekst, maar ook met afbeeldingen. Natuurlijk moet u ervoor zorgen dat u een witte afbeelding als logo gebruikt. In het volgende voorbeeld wordt een wit lorem ipsum-logo gebruikt dat zich in dezelfde map bevindt als het index.html bestand:

<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum-logo">

De hier gebruikte afbeelding is een SVG (Scalable Vector Graphic), een type van vector bestand.

Nu is de kleur van uw logo-afbeelding zwart op een witte achtergrond, zoals weergegeven in de onderstaande afbeelding.

Maar scrol je naar een zwarte achtergrond, dan wordt de kleur van het logo automatisch wit. Dit zie je in de afbeelding hieronder.

U kunt het formaat van het logo ook vergroten door het te vervangen lettertypegrootte met hoogte En breedte in het CSS-blok gericht op het logo. Je hebt nu immers te maken met een afbeelding in plaats van met tekst.

.logo {
kleur: wit;
breedte: 10rem;
/* Andere CSS-eigenschappen */
}

Als u het scherm verkleint, is de mediaquery niet meer van toepassing. Hiermee worden de verschillende overvloeimodi uitgeschakeld, waardoor uw logo verdwijnt. Om het logo terug te brengen naar de pagina, moet u de mix-blend-modus eigenschap op het logo buiten de mediaquery:

.logo {
kleur: wit;
breedte: 10rem;
mix-blend-modus: verschil;
/* Andere CSS-eigenschappen */
}

Hierdoor wordt te allen tijde mix-blending op het logo geactiveerd, zelfs op grotere schermen. Maar op kleine schermen blijft het logo bovenaan staan ​​en volgt het je niet als je naar beneden scrolt (omdat positie: plakkerig werkt alleen op grote schermen). Denk er ten slotte altijd aan om een ​​wit logo te gebruiken om te voorkomen dat het van de pagina verdwijnt.

Meer informatie over CSS-tips en -trucs

Door de mix-blend-modus te gebruiken, kunt u fascinerende lay-outs maken met afwisselende kleuren. Beter nog, u hoeft geen enkele kleur hard te coderen of breekpunten in te stellen, omdat de mix-blend-modus de kleur dynamisch omkeert. Hiermee kun je mooie melanges en kleuren maken voor delen van de inhoud van een element, afhankelijk van de directe achtergrond.

CSS wordt vaak beschouwd als een van de meest opwindende talen om te leren. Dit komt deels omdat CSS vol staat met tips en trucs zoals die je zojuist in dit artikel hebt geleerd. Enkele andere handige CSS-tips en -trucs zijn zweefeffecten, het formaat van afbeeldingen wijzigen zodat ze in containers passen, tekst afkappen met weglatingstekens en het gebruik van teksttransformatie.