Créez une Animation de Texte avec une Vidéo de Fond en HTML et CSS

animation de texte CSS

Créez une Animation de Texte avec une Vidéo de Fond en HTML et CSS

Introduction

Vous avez peut-être vu des sites web où le texte s’affiche de manière élégante, lettre par lettre, avec des animations et des vidéos de fond. Vous voulez savoir comment créer cet effet vous-même ? Ne vous inquiétez pas, ce blog est là pour vous guider, même si vous n’êtes pas un codeur chevronné !

Dans cet article, nous allons apprendre à créer une animation de texte CSS dynamique avec une vidéo de fond en utilisant simplement HTML et CSS. C’est simple, amusant et très impressionnant ! En utilisant des effets créatifs pour sites web, vous pouvez attirer l’attention des visiteurs et rendre votre site unique.

Structure de la Page HTML

Pour commencer, nous allons créer la structure de base de notre page web en utilisant HTML. Voici le code HTML que vous pouvez utiliser :

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <video src="smoke.mp4" autoplay muted></video>
        <h1>
            <span>M</span>
            <span>O</span>
            <span>N</span>
            <span>D</span>
            <span>E</span>
            <span>S</span>
            <span>I</span>
            <span>G</span>
            <span>N</span>
            <span> </span>
            <span>W</span>
            <span>E</span>
            <span>B</span>
        </h1>
    </section>
</body>
</html>

				
			

Explication de la Structure HTML

  • DOCTYPE et Structure HTML : Définissent la version HTML utilisée et la langue du document comme français.
  • Meta Tags  :
    • Le meta charset="UTF-8" assure que le document utilise l’encodage de caractères UTF-8.
    • meta http-equiv="X-UA-Compatible" garantit la compatibilité avec Internet Explorer.
    • Le lien vers la feuille de style style.css définit les styles de la page.
  • Body Section :
    • <section> : Un conteneur qui regroupe tout notre contenu.
    • <video> : La vidéo de fond qui joue automatiquement (autoplay) et est en sourdine (muted).
    • <h1> : Notre titre principal, avec chaque lettre placée dans une balise <span>. Cela nous permet de les animer individuellement.

Mise en Place du Style CSS

Maintenant, passons au code CSS, qui est l’équivalent de la décoration et du mobilier de notre maison. C’est ce qui rendra notre texte et notre vidéo aussi beaux que fonctionnels.

				
					body {
    margin: 0;
    padding: 0;
}

section {
    height: 100vh;
    background: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 1;
}

h1 {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ddd;
    font-size: 5rem;
    font-family: sans-serif;
    letter-spacing: 0.2rem;
}

h1 span {
    opacity: 0;
    display: inline-block;
    animation: animate 1s linear forwards;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0px);
    }
}

/* Styles d'animation décalée pour chaque lettre */
h1 span:nth-child(1) { animation-delay: 1s; }
h1 span:nth-child(2) { animation-delay: 1.5s; }
/* ...continuer pour chaque lettre */

				
			

Analyse du CSS :

body :

  • margin: 0; : Supprime les marges par défaut.
  • padding: 0; : Supprime les espacements internes par défaut.
  • height: 100vh; : Assure que le corps de la page occupe toute la hauteur de la fenêtre.

section :

  • height: 100vh; : Utilise toute la hauteur de la fenêtre pour la section.
  • background: #000; : Applique un fond noir pour un contraste élevé.
  • position: relative; : Définit la section comme le contexte de positionnement pour les éléments enfants.
  • display: flex; align-items: center; justify-content: center; : Centre horizontalement et verticalement tous les éléments enfants.
  • overflow: hidden; : Cache tout débordement de contenu hors de la section.

video :

  • position: absolute; : Place la vidéo par rapport à la section.
  • width: 100%; height: 100%; : Ajuste la vidéo pour couvrir toute la section.
  • object-fit: cover; : Recadre la vidéo pour s’adapter à la section sans distorsion.

h1 :

  • position: absolute; : Place le texte <h1> par rapport à la section.
  • top: 50%; transform: translateY(-50%); : Centre verticalement le texte.
  • width: 100%; text-align: center; : Centre horizontalement le texte sur toute la largeur de la section.
  • color: #ddd; : Définit la couleur du texte en gris clair.
  • font-size: 5rem; : Définit une grande taille de police.
  • font-family: sans-serif; : Utilise une police sans empattement.
  • letter-spacing: 0.2rem; : Ajoute un espacement entre les lettres.

h1 :

  • opacity: 0; : Masque initialement chaque lettre.
  • display: inline-block; : Affiche les lettres en ligne.
  • animation: animate 1s linear forwards; : Anime chaque lettre avec un effet de rotation et de flou.

Conclusion :

Et voilà ! Avec seulement quelques lignes de HTML et de CSS, nous avons créé une animation de texte CSS impressionnante avec une vidéo de fond. Cette technique est parfaite pour ajouter une touche dynamique à votre site web et pour expérimenter des effets créatifs pour sites web.

N’hésitez pas à expérimenter avec différents types d’animations, couleurs, et vidéos pour voir ce que vous pouvez créer. Souvenez-vous, l’important est de s’amuser tout en apprenant !

error:
fr_FR