Comment créer une révélation de texte sur l'effet de défilement avec CSS

Bien que le CSS pur ne puisse pas réaliser directement les effets d'affichage de texte déclenché par défilement, il peut être implémenté efficacement en combinant une petite quantité d'animations de transition JavaScript et CSS; La méthode spécifique consiste à utiliser JavaScript pour détecter si les éléments entrent dans la fenêtre et ajouter la classe "révélée". CSS est responsable de la définition des effets de transition de la transparence et du déplacement. Il est recommandé d'utiliser l'API d'observateur d'intersection pour améliorer les performances et finalement d'obtenir un effet d'affichage de texte de défilement lisse et élégant.

La création d'une révélation de texte sur l'effet de défilement avec CSS est un moyen propre et performant d'ajouter une interaction subtile à vos pages Web. Bien que Pure CSS ait des limites en ce qui concerne les animations basées sur le défilement (puisque CSS seul ne peut pas détecter directement la position de défilement), vous pouvez réaliser un effet de révélation de texte convaincant en utilisant CSS combiné avec un JavaScript minimal pour la détection de défilement. Voici comment le faire efficacement.

1. Utilisez CSS avec JavaScript pour la détection de défilement

Un véritable effet "On Scroll" nécessite JavaScript pour surveiller la position de défilement de l'utilisateur et déclencher un changement de classe lorsque l'élément apparaît. Cependant, l'animation et le style réels sont gérés par CSS.

Structure HTML de base

 <div class = "révéler-container">
  <p class = "text-to-reveal"> Ce texte sera révélé lorsque vous faites défiler. </p>
</div>

CSS: Définissez l'animation de révélation

 .Text-to-reveal {
  Opacité: 0;
  Transform: Translatey (20px);
  Transition: opacité de 0,8 s facturant, transformez 0,8 s facilité de sortie;
}

.text-to-reveal.revealed {
  Opacité: 1;
  Transform: Translatey (0);
}

Cela définit le texte pour être invisible et légèrement décalé initialement. Lorsque la classe revealed est ajoutée, elle s'estompe et se remonte en douceur.

JavaScript: ajouter une classe sur Scroll

 const Textelements = document.QuerySelectorAll ('. Text-to-reveal');

const RevealOnScroll = () => {
  textelements.ForEach (el => {
    const elementTop = el.getBoundingClientRect (). Top;
    const windowheight = window.innerHeight;

    // Si l'élément est dans la fenêtre
    if (elementTop <windowheight * 0.8) {
      el.classlist.add («révélé»);
    }
  });
};

// Exécutez sur le chargement et faites défiler
Window.AddeventListener (&#39;Load&#39;, RevealOnScroll);
Window.AddeventListener (&#39;Scroll&#39;, RevealOnScroll);

Ce script vérifie si chaque élément .text-to-reveal se situe à 80% de la hauteur de la fenêtre. Vous pouvez ajuster 0.8 pour contrôler lorsque la révélation se produit (par exemple, 0.7 pour plus tôt, 1 pour une fois entièrement visible).

2. Facultatif: utilisez les propriétés personnalisées CSS pour la réutilisabilité

Vous pouvez rendre l'effet plus flexible en utilisant des variables CSS:

 .Reveal-container {
  - réévaluation: 0,2 s;
}

.Text-to-reveal {
  Opacité: 0;
  Transform: Translatey (20px);
  Transition: opacité de 0,8 s facturant, transformez 0,8 s facilité de sortie;
  TRANSITION-DELAY: var (- révéler-delay, 0s);
}

.text-to-reveal.revealed {
  Opacité: 1;
  Transform: Translatey (0);
  TRANSITION-DELAY: var (- révéler-delay, 0s);
}

Vous pouvez maintenant contrôler le timing par élément:

 <div class = "révéler-contrainer" style = "- révéler-delay: 0.3s;">
  <p class = "text-to-reveal"> révèle légèrement plus tard </p>
</div>

3. Conseils de performance

• Agrandir l'événement de défilement pour éviter les problèmes de performances:

   Soit Isscrolling = false;
  window.addeventListener ('scroll', () => {
    if (! isscrolling) {
      window.requestanimationframe (() => {
        RevealOnScroll ();
        isscrolling = false;
      });
      isscrolling = true;
    }
  });

• Utilisez transform et opacity pour les animations - elles sont accélérées par GPU et fonctionnent mieux que l'animation margin ou top .

• Évitez d'attacher les auditeurs à trop d'éléments; Envisagez d'utiliser un modèle d'observateur unique pour plusieurs éléments de révélation.

4. Alternative: Utiliser l'observateur d'intersection (recommandé)

Pour de meilleures performances et un code plus propre, utilisez l'API IntersectionObserver :

 const Observer = new intersectionObserver ((entrées) => {
  entrées.ForEach (entrée => {
    if (entry.isINTERSECTING) {
      entry.target.classList.add («révélé»);
      // Facultatif: arrêtez d'observer après révéler
      Observer.unObServe (entrée.target);
    }
  });
}, {Threshold: 0.1}); // déclenche quand 10% de l'élément est visible

document.QuerySelectorall ('. Text-to-reveal'). ForEach (el => {
  Observer.Observe (El);
});

Ceci est plus efficace que d'écouter chaque événement de défilement et est la norme moderne pour les révélations basées sur Scroll.

Fondamentalement, bien que vous ne puissiez pas faire une véritable révélation déclenchée par défilement avec uniquement CSS, combiner un JavaScript minimal avec des transitions CSS lisses vous donne un effet de révélation de texte puissant et performant. Utilisez IntersectionObserver pour les meilleurs résultats et gardez les animations subtiles pour un look professionnel.

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!