Wie man einen „Vorhang auf“-Effekt in CSS erstellt

„Vorhang auf“ nenne ich einen Effekt, bei dem der Hintergrund beim Scrollen von dunkel zu hell wird und der Inhalt darüber in einer Sticky-Position von hell zu dunkel wechselt.

Hier ist ein Beispiel, bei dem ich den Effekt in einem realen Projekt verwendet habe.

Möchten Sie wissen, wie es gemacht wird? Ich nehme Sie hinter die Kulissen und zeige Ihnen, wie Sie den Vorhang mit nichts als HTML und CSS lüften.

Beginnen wir mit dem HTML

Was wir hier erstellen, ist eine Art vereinfachter „Vorhang auf“-Effekt wie dieser

Ich halte die Dinge der Übersichtlichkeit halber einfach, aber wir können dies mit drei Elementen aufbauen.

<div class="curtain">
  <div class="invert">
    <h2>Section title</h2>
  </div>
</div>

Zuerst benötigen wir einen Container für den Vorhang, dem wir die Klasse .curtain geben. Dann haben wir innerhalb des .curtain ein Kindelement .invert, das als unser „Sticky“-Box dient. Und schließlich haben wir den Inhalt innerhalb dieser Box – in diesem speziellen Beispiel ein klassisches <h2>-Element.

Lassen Sie uns einige CSS-Variablen einrichten

Es gibt drei Werte, von denen wir wissen, dass wir sie im Voraus benötigen werden. Machen wir daraus CSS-Variablen, damit wir sie einfach in unseren Stilen verwenden und bei Bedarf später leicht ändern können.

• --minh – Die Höhe des Containers
• --color1 – Die helle Farbe
• --color2 – Die dunkle Farbe

:root {
  --minh: 98vh;
  --color1: wheat;
  --color2: midnightblue;
}

Zeit, den Vorhang zu ziehen

Als Nächstes können wir unser .curtain-Element mit den folgenden Techniken definieren:

• Ein linear-gradient für den „geteilten“ Hintergrund
• min-height für den zusätzlichen Platz am unteren Rand des Containers

Wir verwenden das Pseudo-Element ::after, um den zusätzlichen Platz am unteren Rand hinzuzufügen. Auf diese Weise haftet unser „Sticky“-Inhalt tatsächlich am Container, während Sie über das ::after-Element scrollen. Es ist eine Illusion.

.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}

/** add extra space to the bottom (need this for the "sticky" effect) **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}

Sticky-Inhalt erstellen

Als Nächstes müssen wir unseren Inhalt „sticky“ machen, in dem Sinne, dass er perfekt im Container sitzt, während Hintergrund und Text ihre Farbwerte tauschen. Tatsächlich haben wir dem Kindelement von .curtain bereits die Klasse .invert gegeben, die wir als Sticky-Container verwenden können.

Bleiben Sie kurz bei mir – so wird das ablaufen:

• position: sticky und top definieren die Stickiness und wo sie haftet.
• mix-blend-mode: difference mischt die Farbe des Inhalts innerhalb des <h2>-Elements mit dem Hintergrundgradienten des .curtain.
• display: flex zentriert den Inhalt zur Darstellung.
• min-height definiert die Höhe des Containers und ermöglicht zusätzlichen Platz am unteren Rand.
• color setzt die Farbe der h2-Überschrift.

Jetzt setzen wir das in CSS-Code um!

.invert {
  /** make the content sticky **/
  position: sticky;
  top: 20px;

  /** blend the content with the contrast effect **/
  mix-blend-mode: difference;

  /** center the content **/
  display: flex;
  align-items: center;
  justify-content: center;
  
  /** set the minimum height of the section **/
  min-height: var(--minh);
}

h2 {
  /** set the color of the text **/
  color: var(--color1);
}

Hier passiert viel, also lassen Sie uns alles einzeln erklären.

Zuerst haben wir eine Sticky-Position, die selbsterklärend ist, und Flexbox, um den Inhalt zu zentrieren. Nichts Neues oder besonders Kompliziertes daran.

Die Höhe des Inhalts wird mithilfe einer CSS-Variable eingestellt, und der Wert ist derselbe wie der des Pseudo-Elements .curtain::after.

Die Deklaration mix-blend-mode: difference mischt unseren Inhalt mit dem Hintergrund. Der Wert difference ist kompliziert, aber Sie können ihn sich wie eine invertierte Textfarbe vor dem Hintergrund vorstellen. Hier ist eine schöne Demo aus dem CSS-Tricks Almanac, die die verschiedenen mix-blend-mode-Werte zeigt.

Damit das Mischen funktioniert, müssen wir die Farbe unserer Überschrift festlegen. In diesem Fall weisen wir der Variable --color1 einen hellen Farbwert (wheat) zu.

„Vorhang auf“-Demo

Haken und Ösen (Gotchas)

Beim Ausarbeiten der Details des „Vorhang auf“-Effekts stieß ich auf einige Probleme. Wenn Sie beispielsweise Bilder zum „Sticky“-Inhalt hinzufügen möchten, vermeiden Sie Bilder, die nicht gut aussehen, wenn ihre Farben invertiert sind. Hier ist eine schnelle Demo, bei der ich eine einfache SVG- und eine transparente PNG-Datei erstellt habe, und es sieht gut aus.

Ein weiterer Stolperstein: Es gibt keine Möglichkeit, mix-blend-mode: difference auf bestimmte Kindelemente wie Überschriften anzuwenden und den Effekt bei Bildern zu vermeiden. Ich habe festgestellt, dass es dafür mehrere Gründe gibt, der erste ist, dass position: sticky die Mischung aufhebt.

Das Gleiche gilt, wenn Sie beispielsweise etwas wie transform: skewY auf dem Container verwenden, um den Dingen eine leichte „Neigung“ zu verleihen. Ich vermute, dass andere Eigenschaften nicht gut mit der Mischung zusammenarbeiten, aber ich bin nicht so weit gegangen, um herauszufinden, welche.

Hier ist die Demo ohne Scrollen, die die störenden Eigenschaften entfernt.

Vorhang auf!

Ich habe es genossen, diese Komponente zu erstellen, und ich liebe es immer, wenn ich etwas nur mit HTML und CSS erreichen kann, besonders wenn es auf allen Browsern reibungslos funktioniert.

Was werden Sie damit machen? Gibt es einen anderen Weg, wie Sie einen „Vorhang auf“-Effekt wie diesen angehen würden? Lassen Sie es mich in den Kommentaren wissen!