CSS: Schwarz-Weiß-Wechsele-Dich-Effekt

So einfach wird schwarze Schrift beim Scrollen vor einem schwarzen Hintergrund weiß.

Es braucht oft nicht viel CSS-Code, um einen netten kleinen, aber doch beeindruckenden Effekt zu erzeugen. Wie wäre es zum Beispiel mit einer schwarzen Schrift, die beim Scrollen auf einen schwarzen Hintergrund wie von Magie weiß wird? Ein einfaches Stückchen CSS macht es möglich:

Zuerst bauen wir eine kleine HTML-Seite, deren Inhalt im Prinzip nur aus zwei Blöcken besteht. Zuerst fügen wir zwischen dem Tag <section> den Textinhalt ein, der später auf weißem Hintergrund schwarz erscheinen soll (also der Standard), auf schwarzem Hintergrund allerdings weiß. Direkt darunter kommt ein Div-Container, dem wir z.B. die Klasse layer geben. Das Ganze sieht also in etwa so aus:

<section>

<h2>Schwarz-Weiß-Wechselse-Dich-Effekt </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, et ad laudantium, ipsa sunt enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntur veniam necessitatibus at suscipit voluptatem deleniti. Aperiam? enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntu ipsa sunt enim obcaecati, possimus sapiente molestias distinctio dolores qui enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntu.</p>
…
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, et ad laudantium, ipsa sunt enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntur veniam necessitatibus at suscipit voluptatem deleniti. Aperiam? enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntu ipsa sunt enim obcaecati, possimus sapiente molestias distinctio dolores qui enim obcaecati, possimus sapiente molestias distinctio dolores qui consequuntu.</p>

</section>

<div class="layer"></div>

Im nächsten Schritt folgt das CSS, das im folgenden Screenshot abgebildet ist. Body, p und h2 dienen nur der Formatierung des Textes, wichtig sind die beiden nächsten Klassen.

Zuerst legen wir fest wie der Inhalt der section vom Browser interpretiert werden soll. Da wir ein Schwarz-Weiß-Beispiel haben, wird die Hintergrundfarbe mit #ffffff als weiß festgelegt, außerdem wichtig: position auf relative setzen. Sonst funktioniert es mit dem Scrollen nicht mehr. Das padding dient auch hier nur der Formatierung und sorgt dafür, dass der Text nicht an den Seitenrändern klebt.

Die eigentliche Magie findet aber in der Klasse layer statt. Auch hier setzen wir die Hintergrundfarbe auf weiß, das mag zuerst verwirren, aber um etwas ins Gegenteil (also schwarz) zu ändern, muss es eben erst einmal weiß sein. Mit position, top und left positionieren wir den Inhalt des Containers fix an den Anfang des sichtbaren Browserfensters, damit dort der Text durchscrollen kann. Die Größe des Hintergrunds wird mit height und width festgelegt. Also einer Weite von 100% und einer Höhe von 50vh (also jeweils der Hälfte des sichtbaren Browserfensters).

Und jetzt zur Magie: mix-blend-mode

Vereinfacht gesagt legt mix-blend-mode fest, wie sich die Farbwerte übereinanderliegender Elemente miteinander und mit dem Hintergrund vermischen. Wenn wir also hier den Wert difference nehmen, dass die dunklere Farbe von der helleren abgezogen wird. Aus irgendwelchen Gründen gibt es auch den Wert exclusion, der im Grunde dasselbe macht – fragt mich bitte nicht warum.

Der entscheidende CSS-Code sieht also folgendermaßen aus:

section {
	background-color: #ffffff;
	position: relative;
	padding: 100px;
}

.layer {
	background-color: #ffffff;
	position:fixed;
	top: 0;
	left: 0;
	height:50vh;
	width: 100%;
	mix-blend-mode: difference;
}

Auf jeden Fall ist mix-blend-mode relativ mächtig, es kann zum Beispiel auch mit Sättigung arbeiten oder eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe erzeugen. Eine passende Liste dazu findet ihr hier.