Passer du texte solide à knockout sur Scroll

Cette astuce CSS crée un titre captivant qui passe de la couleur solide au texte knockout lorsque l'image d'arrière-plan défile. Réalisé en utilisant uniquement HTML et CSS, cet effet implique deux conteneurs de position fixe. On affiche un fond blanc avec du texte knockout; L'autre, une image d'arrière-plan avec du texte blanc. Les techniques d'écrêtage intelligentes se cachent et révèlent du texte basé sur la position de défilement, simulant un changement d'arrière-plan.

Remarque importante: Cette technique peut ne pas fonctionner correctement sur les anciennes versions Internet Explorer ou les navigateurs WebKit mobiles. Envisagez de mettre en œuvre des solutions de secours pour la compatibilité.

Structure HTML

Le HTML se compose d'un emballage extérieur contenant deux conteneurs identiques, chacun avec un<h1></h1> élément dans un .title_wrapper div:

<div class="wrapper">
  <div class="container container_solid">
    <div class="title_wrapper">
      <h1 id="Les-grands-espaces">Les grands espaces</h1>
    </div>
  </div>

  <div class="container container_image" aria-hidden="true">
    <div class="title_wrapper">
      <h1 id="Les-grands-espaces">Les grands espaces</h1>
    </div>
  </div>
</div>

Chaque conteneur utilise une classe .container et un identifiant unique ( .container_solid , .container_image ). Cela permet des styles de base partagés et du ciblage individuel.

Styles CSS initiaux

Le CSS définit les deux conteneurs en hauteur pleine écran ( 100vh ). .container_solid reçoit un fond blanc, tandis que .container_image obtient une image d'arrière-plan fixe:

 .wrapper {
  Position: relative; / * Ajouté pour le positionnement approprié * /
  hauteur: 100%;
  débordement: caché; / * Ajouté pour un meilleur contrôle de débordement * /
}

.Container {
  Hauteur: 100VH;
  Position: absolue;
  Largeur: 100%;
  à gauche: 0;
}

.Container_solid {
  Contexte: blanc;
  en haut: 0;
}

.Container_image {
  Background-Image: URL (/path/to/img.jpg);
  taille arrière: 100 VW Auto;
  Position d'arrière-plan: Centre;
  Attachement de l'arrière-plan: fixe;
  En haut: 100 VH;
}

Le<h1></h1> Les éléments sont stylisés. Le texte de .container_image est blanc. .container_solid<h1></h1> Utilise background-clip: text pour l'effet knockout, avec une couleur noire de secours:

 .title_wrapper h1 {
  Position: absolue; / * Ajouté pour un positionnement précis * /
  en haut: 50%;
  Gauche: 50%;
  Transformer: traduire (-50%, -50%);
  Texte-aligne: Centre;
  taille de police: 4EM; / * Exemple de taille de police * /
}

.Container_solid .title_wrapper h1 {
  Contexte: URL (https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyjhchbfawqioJe0ntg5fq);
  taille arrière: 100 VW Auto;
  Position d'arrière-plan: Centre;
  -Webkit-Text-Fill-Color: transparent;
  Texte-remplissage: transparent;
  -Webkit-Background-Clip: Texte;
  Clip d'arrière-plan: texte;
  Couleur: noir;
}

.Container_image .Title_wrapper H1 {
  Couleur: blanc;
}

Écrêtage et positionnement des conteneurs

L'étape cruciale consiste à couper les conteneurs pour masquer le contenu débordant. Le positionnement absolu est utilisé, nécessitant un positionnement manuel:

 .Container {
  Clip: rect (0, auto, auto, 0);
  débordement: caché;
  Position: absolue;
  Hauteur: 100VH;
  à gauche: 0;
  Largeur: 100%;
  -Webkit-mask-iMage: -webkit-linear-gradient (top, #ffffff 0%, # ffffff 100%); / * SAFARI FIX * /
}

.container_image est positionné ci-dessous .container_solid Using top: 100vh; .

Amélioration de l'accessibilité

L'attribut aria-hidden="true" est ajouté au .container_image pour informer les lecteurs d'écran que ce conteneur est purement décoratif.

Cette approche raffinée assure à la fois l'attrait visuel et l'accessibilité. D'autres ajustements de style peuvent être faits pour personnaliser le texte et l'effet global. N'oubliez pas de toujours hiérarchiser les considérations d'accessibilité lors de l'ajout d'effets dynamiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!