Vom soliden zum Knockout -Text auf Scrollen gehen

Dieser CSS -Trick erzeugt einen faszinierenden Titel, der von fester Farbe zu Knockout -Text als Hintergrundbild -Bildlauf wechselt. Dieser Effekt wird nur mit HTML und CSS erreicht und umfasst zwei Behälter mit fester Position. Man zeigt einen weißen Hintergrund mit Knockout -Text an. das andere ein Hintergrundbild mit weißem Text. Clevere Clipping -Techniken verbergen und enthüllen Text basierend auf der Bildlaufposition und simulieren eine Hintergrundänderung.

Wichtiger Hinweis: Diese Technik funktioniert möglicherweise nicht korrekt in älteren Internet -Explorer -Versionen oder in mobilen Webkit -Browsern. Erwägen Sie die Implementierung von Fallback -Lösungen für die Kompatibilität.

HTML -Struktur

Die HTML besteht aus einer äußeren Verpackung, die zwei identische Behälter enthält, von denen jeweils eine<h1></h1> Element innerhalb eines .title_wrapper div:

<div class="wrapper">
  <div class="container container_solid">
    <div class="title_wrapper">
      <h1 id="Die-großartige-Natur">Die großartige Natur</h1>
    </div>
  </div>

  <div class="container container_image" aria-hidden="true">
    <div class="title_wrapper">
      <h1 id="Die-großartige-Natur">Die großartige Natur</h1>
    </div>
  </div>
</div>

Jeder Container verwendet eine .container -Klasse und eine eindeutige Kennung ( .container_solid , .container_image ). Dies ermöglicht gemeinsame Basisstile und individuelles Ziel.

Erste CSS -Stile

Das CSS setzt beide Container auf Vollbildhöhe ( 100vh ). .container_solid erhält einen weißen Hintergrund, während .container_image ein festes Hintergrundbild erhält:

 .Wrapper {
  Position: Relativ; / * Für die ordnungsgemäße Positionierung hinzugefügt */
  Höhe: 100%;
  Überlauf: versteckt; / * Für eine bessere Überlaufkontrolle hinzugefügt */
}

.Container {
  Höhe: 100VH;
  Position: absolut;
  Breite: 100%;
  links: 0;
}

.Container_solid {
  Hintergrund: weiß;
  Top: 0;
}

.Container_image {
  Hintergrund-Image: URL (/path/to/img.jpg);
  Hintergrundgröße: 100VW Auto;
  Hintergrundposition: Zentrum;
  Hintergrundantrieb: behoben;
  TOP: 100VH;
}

Der<h1></h1> Elemente sind gestylt. .container_image Text ist weiß. .container_solid 's<h1></h1> Verwendet background-clip: text für den Knockout-Effekt mit einer schwarzen Fallback-Farbe:

 .title_wrapper h1 {
  Position: absolut; / * Für eine präzise Positionierung hinzugefügt */
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
  Text-Align: Mitte;
  Schriftgröße: 4EM; / * Beispiel Schriftgröße */
}

.Container_solid .title_wrapper h1 {
  Hintergrund: URL (https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&fm=jhchbfawfawfawfawfawfawfawfawfawfawfawfawfawfawfawqioje0ntg5fq.
  Hintergrundgröße: 100VW Auto;
  Hintergrundposition: Zentrum;
  -Webkit-Text-Fill-Farben: transparent;
  Text-Fill-Farben: transparent;
  -Webkit-Background-Clip: Text;
  Hintergrund-Clip: Text;
  Farbe: Schwarz;
}

.Container_image .title_wrapper h1 {
  Farbe: weiß;
}

Ausschnitt und Behälterpositionierung

Der entscheidende Schritt besteht darin, die Container auszuschneiden, um überfüllte Inhalte zu verbergen. Es wird eine absolute Positionierung verwendet, die eine manuelle Positionierung erfordert:

 .Container {
  Clip: Rect (0, Auto, Auto, 0);
  Überlauf: versteckt;
  Position: absolut;
  Höhe: 100VH;
  links: 0;
  Breite: 100%;
  -Webkit-Masken-Image: -Webkit-linear-Gradient (top, #ffffff 0%, #ffffff 100%); / * Safari fix *///
}

.container_image ist unten positioniert .container_solid mit top: 100vh; .

Verbesserung der Zugänglichkeit

Das Attribut aria-hidden="true" wird dem .container_image hinzugefügt, um die Bildschirmleser darüber zu informieren, dass dieser Behälter rein dekorativ ist.

Dieser raffinierte Ansatz sorgt sowohl für die visuelle Anziehungskraft als auch die Zugänglichkeit. Weitere Styling -Anpassungen können vorgenommen werden, um den Text und den Gesamteffekt zu personalisieren. Denken Sie daran, die Überlegungen zur Zugänglichkeit immer priorisieren, wenn dynamische Effekte hinzugefügt werden.

Das obige ist der detaillierte Inhalt vonVom soliden zum Knockout -Text auf Scrollen gehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!