Créer une apparition depuis la gauche en CSS

Un effet d’apparition depuis la gauche fait entrer un élément dans la zone visible depuis une position située à gauche de son emplacement final. En CSS, vous pouvez le créer en modifiant transform et opacity entre deux états. Cet exemple utilise une transition ; une animation CSS avec des images clés est une autre option lorsqu’un effet comporte plusieurs étapes ou se répète.

Fonctionnement d’une apparition depuis la gauche

Une transition anime une propriété lorsque sa valeur change. L’élément commence décalé vers la gauche et transparent, puis rejoint sa position normale et devient visible. translateX() contrôle le déplacement horizontal, tandis que la durée et la fonction d’accélération de la transition déterminent la sensation du mouvement. La propriété transform modifie la position visuelle sans changer la place de l’élément dans le flux du document.

Préparer la structure HTML

La page doit contenir un élément doté d’une classe que le CSS peut cibler. Dans l’exemple complet ci-dessous, l’élément commence avec la seule classe slide-in, puis JavaScript ajoute is-visible après le chargement de la page afin que le navigateur puisse effectuer la transition depuis l’état initial. Si les deux classes sont présentes dans le HTML dès le départ, l’élément est visible dès son premier affichage, sans animation depuis l’état masqué. Pour voir l’apparition animée, ajoutez la classe de visibilité après le rendu de l’état initial, comme dans l’exemple.

Créer une apparition depuis la gauche en CSS

Définissez l’état initial avec transform: translateX(-100vw) et opacity: 0. Le décalage d’une largeur de fenêtre place l’élément à gauche de l’écran ; opacity le rend transparent à cet endroit. Dans l’état visible, utilisez transform: translateX(0) et opacity: 1. Une transition appliquée à ces propriétés anime leur changement en une demi-seconde, avec une accélération de type ease.

La page masque également le débordement horizontal afin que la position initiale hors écran ne crée pas de barre de défilement horizontale. Réduisez la distance de translation si vous souhaitez que l’élément parcoure un trajet plus court.

Déclencher et personnaliser l’effet

Copiez ce JavaScript dans un fichier tel que generate-page.js, puis exécutez-le avec Node.js ; il affiche le code source d’une page HTML complète. Enregistrez ce code dans slide-in.html et ouvrez le fichier dans un navigateur pour voir l’effet. Cet exemple déclenche l’effet au chargement de la page ; un site peut aussi ajouter la classe de visibilité en réponse à un clic sur un bouton ou à un autre événement. L’étiquette visible de l’exemple reste en anglais.

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>`;
console.log(html);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>

Pour modifier la vitesse, changez 500ms ; la durée et l’accélération peuvent être réglées indépendamment. Pour un mouvement venant du haut, utilisez translateY() avec une distance verticale négative dans l’état initial, puis translateY(0) dans l’état visible. JavaScript est facultatif si la classe de visibilité est déjà présente au rendu de la page ; utilisez-le lorsque l’effet doit commencer après un événement ou un changement d’état ultérieur.

Questions fréquentes

Cet effet fonctionne-t-il sur mobile ?

L’exemple utilise des transformations et des transitions CSS. Dans le cadre de vos vérifications habituelles de compatibilité, vérifiez les navigateurs et les appareils pris en charge par votre site.

Comment modifier la durée ?

Modifiez la durée 500ms dans la déclaration transition. Vous pouvez définir des durées différentes pour transform et opacity si vous souhaitez que ces changements se terminent à des moments distincts.

L’élément peut-il apparaître depuis une autre direction ?

Oui. Utilisez translateY() pour le déplacer verticalement, ou modifiez le signe et la distance de translateX() pour le faire entrer depuis le côté horizontal opposé.

JavaScript est-il nécessaire ?

Non. CSS gère la transition entre les deux états. JavaScript n’est qu’un moyen de changer la classe au bon moment ; vous pouvez aussi utiliser une classe déjà présente dans le HTML ou un autre changement d’état piloté par CSS.