Create a Text Animation with a Background Video Using HTML and CSS

Introduction

You might have seen websites where the text appears elegantly, letter by letter, with animations and background videos. Want to know how to create this effect yourself? Don't worry, this blog is here to guide you, even if you're not an experienced coder!

In this article, we will learn how to create a dynamic CSS text animation with a background video using just HTML and CSS. It's simple, fun, and very impressive! By using creative effects for websites, you can capture visitors' attention and make your site stand out.

HTML Page Structure

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>

Explanation of the HTML Structure

DOCTYPE and HTML Structure: Define the HTML version used and the language of the document as French.
Meta Tags :
- The meta charset="UTF-8" ensures that the document uses UTF-8 character encoding.
- meta http-equiv="X-UA-Compatible" ensures compatibility with Internet Explorer.
- The link to the stylesheet style.css sets the styles for the page.
Body Section :
- : A container that holds all our content.
- <video> : The background video that plays automatically (autoplay) and is muted (muted).
- <h1> : Our main title, with each letter placed in a <span> tag. This allows us to animate them individually.

Setting Up CSS Style

Now, let’s move on to the CSS code, which is like the decoration and furniture of our house. It’s what will make our text and video both beautiful and functional.

				
					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 */

CSS Analysis:

body :

margin: 0; : Removes the default margins.
padding: 0;: Removes the default internal spacing.
height: 100vh;: Ensures that the body of the page occupies the entire height of the viewport.

section :

height: 100vh; : Utilizes the full height of the viewport for the section.
background: #000; : Applies a black background for high contrast.
position: relative; : Sets the section as the positioning context for child elements.
display: flex; align-items: center; justify-content: center; : Centers all child elements both horizontally and vertically.
overflow: hidden; : Hides any content that overflows outside of the section.

video :

position: absolute; : Positions the video relative to the section.
width: 100%; height: 100%; : Adjusts the video to cover the entire section.
object-fit: cover; : Crops the video to fit the section without distortion.

h1 :

position: absolute; : Positions the text relative to the section.
top: 50%; transform: translateY(-50%); : Centers the text vertically.
width: 100%; text-align: center; : Centers the text horizontally across the full width of the section.
color: #ddd; : Sets the text color to light gray.
font-size: 5rem; : Sets a large font size.
font-family: sans-serif; : Uses a sans-serif font.
letter-spacing: 0.2rem; : Adds spacing between letters.

h1 :

opacity: 0; : Initially hides each letter.
display: inline-block; : Displays the letters inline.
animation: animate 1s linear forwards; : Animates each letter with a rotation and blur effect.

Conclusion :

And there you have it! With just a few lines of HTML and CSS, we’ve created an impressive CSS text animation with a background video. This technique is perfect for adding a dynamic touch to your website and experimenting with creative effects for websites.

Feel free to experiment with different types of animations, colors, and videos to see what you can create. Remember, the key is to have fun while learning!

Create a Text Animation with a Background Video Using HTML and CSS