So ändern Sie die Farbe beim Scrollen mit CSS dynamisch

Bei stationären Website-Elementen wie Logos kommt es beim Scrollen der Seite häufig zu einer Farbverwechslung. Dies kann passieren, wenn das statische Element über einen Abschnitt der Website verläuft, der dieselbe Farbe wie das Element hat. Das statische Element ist unsichtbar, solange es auf diesem Hintergrund ruht.

Um dieses Problem zu beheben, müssen Sie die Farbe des Logos dynamisch umkehren, wenn es über ein Element mit derselben Farbe geht. Erfahren Sie, wie Sie diesen Effekt nur mit CSS erzielen, ohne dass JavaScript erforderlich ist!

Laden Sie den Startercode herunter

Um diesem Tutorial zu folgen, laden Sie den Startercode von herunter GitHub-Repository auf Ihren lokalen Computer.

Offen index.html in einem Browser, der wie die hier gezeigte Seite aussehen sollte:

Die HTML-Seite enthält ein Logo und vier Abschnitte. Jeder Abschnitt hat einen Dummy-Titel und drei Absätze mit Dummy-Text. Der Text des Logos hat die gleiche schwarze Farbe wie der Hintergrund des zweiten und vierten Abschnitts. Dieser Effekt kommt von der

n-tes Kind (gerade) einblocken Styles.css, wodurch der schwarze Hintergrund auf gerade Abschnitte angewendet wird.

Das Logo klebrig machen

Bei diesem Startercode bleibt das Logo nicht oben hängen. Das bedeutet, dass das Logo verschwindet, wenn Sie auf der Seite nach unten scrollen. Sie können Ihr Logo in eine klebrige Kopfzeile verwandeln, indem Sie das anwenden Position: klebrig Eigenschaft in der CSS-Datei hinzufügen. Für einen tieferen Einblick in die Positionierung in CSS lesen Sie unseren Beitrag auf CSS-Positionseigenschaft.

Achten Sie darauf, dass das Logo oben haftet, aber tun Sie dies nur auf größeren Bildschirmen (da es bei kleineren Bildschirmgrößen über andere Elemente hinausragen könnte). Die folgende HTML-responsive Medienabfrage erzeugt diesen Effekt:

@Medien(Breite > 980px) {
.Logo { 
Position: klebrig; 
Spitze: .5rem; 
 }
}

Jetzt bleibt das Logo immer oben hängen und folgt Ihnen beim Scrollen. Sie werden jedoch auch feststellen, dass der Text verschwindet, wenn Sie in die dunklen Hintergrundbereiche scrollen (da der Logotext ebenfalls schwarz ist). Sehen Sie sich nun an, wie Sie dieses Problem beheben können.

Hinzufügen des Mix-Blend-Modus zu Ihrem Sticky Header

Um sicherzustellen, dass das schwarze Logo auf schwarzem Hintergrund nicht verschwindet, müssen Sie die Farbe dynamisch invertieren. Sie würden dies tun, indem Sie die verwenden Mix-Misch-Modus CSS-Eigenschaft hinzufügen und ihr den Wert zuweisen Unterschied:

@Medien(Breite > 980px) { 
.Logo { 
Position: klebrig; 
Spitze: .5rem; 
Mix-Misch-Modus: Unterschied
 }
}

Die CSS-Eigenschaft „mix-blend-mode“ gibt an, wie der Inhalt eines Elements mit dem Inhalt des übergeordneten Elements und seinem Hintergrund verschmelzen soll. Der unterschiedliche Wert nimmt den Differenzwert jedes Pixels an und invertiert die Lichtfarben. Wenn also die Farbwerte gleich sind, werden sie schwarz. Unterschiede in den Werten werden umgekehrt.

Durch den oben genannten CSS-Zusatz verschwindet das Logo vollständig. Dies liegt daran, dass Sie die Farbe des Logotexts außerhalb der Medienabfrage nicht auf Weiß eingestellt haben. Machen Sie das mit dem folgenden Code:

.Logo { 
Farbe: Weiss; 
/* Andere CSS-Eigenschaften */
}

Jetzt haben Sie alles erfolgreich eingerichtet. Scrollen Sie auf der Seite nach unten und in den schwarzen Hintergrund. Sie würden sehen, wie sich das Logo von Schwarz zu Weiß ändert.

Sie können neben Schwarz und Weiß auch mit anderen Farben arbeiten. Wenn Sie beispielsweise die Farbe Ihres Logotexts in Blaugrün (#008080) ändern, erhalten Sie auf weißem Hintergrund die Farbe Rosa. Das folgende Bild veranschaulicht dies.

In den meisten Fällen möchten Sie, dass Ihr Element weiß ist, um die besten Ergebnisse zu erzielen. Wenn Sie nach oben scrollen, wird Ihr Logo möglicherweise halbiert. Dies geschieht, weil das Logo außerhalb des existiert Element. Um das Logo vollständig anzuzeigen, müssen Sie die Hintergrundfarbe festlegen Element zu Weiß.

Ein Bild als Logo anstelle von Text verwenden

Diese Technik funktioniert nicht nur mit Text, sondern auch mit Bildern. Natürlich müssen Sie darauf achten, dass Sie als Logo ein weißes Bild verwenden. Im folgenden Beispiel wird ein weißes Lorem-Ipsum-Logo verwendet, das sich im selben Ordner wie das befindet index.html Datei:

<Bildsrc=„loremipsum-297.svg“alt=„Lorem Ipsum-Logo“>

Das hier verwendete Bild ist ein SVG (Scalable Vector Graphic), eine Art von Vektordatei.

Jetzt ist die Farbe Ihres Logobildes Schwarz auf weißem Hintergrund, wie im Bild unten gezeigt.

Wenn Sie jedoch in einen schwarzen Hintergrund scrollen, wird die Farbe des Logos automatisch zu Weiß. Sie können dies im Bild unten sehen.

Sie können das Logo auch durch Ersetzen vergrößern Schriftgröße mit Höhe Und Breite im CSS-Block, der auf das Logo abzielt. Schließlich haben Sie es jetzt nicht mehr mit Text, sondern mit einem Bild zu tun.

.Logo {
Farbe: Weiss;
Breite: 10rem;
/* Andere CSS-Eigenschaften */
}

Wenn Sie den Bildschirm verkleinern, wird die Medienabfrage nicht mehr angewendet. Dadurch werden die verschiedenen Mischmodi deaktiviert und Ihr Logo verschwindet. Um das Logo wieder auf die Seite zu bringen, müssen Sie das festlegen Mix-Misch-Modus Eigenschaft auf dem Logo außerhalb der Medienabfrage:

.Logo {
Farbe: Weiss;
Breite: 10rem;
Mix-Misch-Modus: Unterschied;
/* Andere CSS-Eigenschaften */
}

Dadurch wird die Mischungsüberblendung auf dem Logo jederzeit aktiviert, auch auf größeren Bildschirmen. Aber auf kleinen Bildschirmen bleibt das Logo oben und folgt Ihnen nicht, wenn Sie nach unten scrollen (weil Position: klebrig funktioniert nur auf großen Bildschirmen). Denken Sie schließlich immer daran, ein weißes Logo zu verwenden, um zu verhindern, dass es von der Seite verschwindet.

Erfahren Sie mehr über CSS-Tipps und Tricks

Durch den Mix-Blend-Modus können Sie faszinierende Layouts mit wechselnden Farben erstellen. Besser noch: Sie müssen keine Farben fest codieren oder Haltepunkte festlegen, da der Mix-Blend-Modus die Farbe dynamisch invertiert. Damit können Sie je nach direktem Hintergrund schöne Mischungen und Farben für Teile des Inhalts eines Elements erstellen.

CSS wird oft als eine der aufregendsten Sprachen angesehen, die man lernen kann. Dies liegt zum Teil daran, dass CSS voller Tipps und Tricks steckt, wie Sie sie gerade in diesem Artikel gelernt haben. Weitere praktische CSS-Tipps und -Tricks sind Hover-Effekte, die Größenänderung von Bildern, damit sie in Container passen, das Abschneiden von Text mit Ellipsen und die Verwendung von Texttransformationen.