Wie man einen „Erhöhung der Vorhänge' in CSS wirkt

Dieser CSS -Effekt, den ich "Erhöhung der Vorhänge" nenne, erzeugt einen visuell auffälligen Übergang zum Scrollen. Der Hintergrund verlagert sich von dunkel zu hell, während der klebrige Gehalt oben von hell zu dunkel wechselt.

So sieht es in einer realen Anwendung aus: [Link zu Beispiel - Ersetzen Sie, falls dies verfügbar ist.

Bereit zu lernen, wie man diesen Effekt erzeugt? Tauchen wir in eine einfache Implementierung von HTML und CSS ein.

HTML -Struktur

Für Klarheit verwenden wir eine vereinfachte Version:

<div class="curtain">
  <div class="invert">
    <h2>Abschnittstitel</h2>
  </div>
</div>

Dies verwendet einen .curtain -Container für den Hintergrundeffekt, ein .invert Element für den klebrigen Inhalt und eine<h2></h2> für die Überschrift.

CSS -Variablen

Wir definieren CSS -Variablen für eine einfache Anpassung:

 :Wurzel {
  -Minh: 98VH;
  -Color1: Weizen;
  -Color2: MidnightBlue;
}

Diese Variablen steuern die Behälterhöhe ( --minh ), die helle Farbe ( --color1 ) und die dunkle Farbe ( --color2 ).

Erstellen des Vorhangseffekts

Das .curtain -Element verwendet einen linearen Gradienten für den Hintergrund geteilt und min-height für zusätzliche Unterseite:

 .Vorhang {
  Hintergrundbild: Linear-Gradient (bis unten, var (-color2) 50%, var (-color1) 50%);
}

.Curtain :: nach {
  Inhalt: "";
  Anzeige: Block;
  min-hohe: var (-minh);
}

Das ::after dem Pseudo-Element schafft die Illusion des zusätzlichen Raums und stellt sicher, dass der klebrige Inhalt im Container bleibt.

Implementierung von Haftinhalten

Die .invert Invertiert den Klassen den klebrigen Inhalt stilft:

 .invert {
  Position: klebrig;
  Top: 20px;
  Mix-Blend-Mode: Differenz;
  Anzeige: Flex;
  Ausrichtung: Zentrum;
  Justify-Content: Center;
  min-hohe: var (-minh);
}

H2 {
  Farbe: var (-color1);
}

position: sticky und top erstellen Sie den klebrigen Effekt. mix-blend-mode: difference verbindet die Inhaltsfarbe mit dem Hintergrundgradienten und erzeugt den inversen Effekt. Flexbox zentriert den Inhalt.

Der mix-blend-mode: difference erzeugt einen Inversionseffekt. Eine visuelle Erläuterung der mix-blend-mode -Werte finden Sie in dieser CSS-Tricks Almanac-Demo: [Link zu CSS-Tricks-Demo-Ersetzen Sie, falls verfügbar].

Demo und Überlegungen

Eine Live -Demo, die den Effekt zeigt, finden Sie hier: [Link zur Demo - Ersetzen Sie durch den tatsächlichen Link, falls verfügbar]

Wichtige Anmerkungen:

• Bilder im Klebstoffgehalt sind möglicherweise nicht gut mit der Farbinversion. Erwägen Sie, SVGs oder transparente PNGs zu verwenden.
• mix-blend-mode: difference funktioniert nicht gut mit bestimmten Eigenschaften wie transform am Container.

Diese Technik bietet eine saubere, browserkompatible Lösung, um einen visuell ansprechenden "Erhöhung der Vorhänge" -Effekt mit nur HTML und CSS zu erzeugen. Lassen Sie mich in den Kommentaren wissen, wie Sie diesen Effekt verwenden würden!

Das obige ist der detaillierte Inhalt vonWie man einen „Erhöhung der Vorhänge' in CSS wirkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!