Design a Video Slide Animation Effect using HTML CSS and JavaScript

Text Typing Animation Effect using HTML CSS and JavaScript

Nowadays, Video Slide animations are very popular. In this article, we will see how to make Video Slide Animation using HTML, CSS, and JavaScript on any webpage. Below are the two steps on how to do it. It will help the beginner to build some awesome Video Slide animations using HTML, CSS, and JS by referring to this article.

What is CSS Animation?

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one which contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur.

Approach

Make a container class inside the body in the HTML file.
Use Slider class inside video tag.
Use autoplay loop muted class(to make a loop) in video tag.
Use li tag to make a list of videos.
Use classes to give effects to HTML elements.
Use onClick event in videos.

Below is the implementation of the above approach.

Step by Step Implementation

Step 1: Create the HTML file named index.html & add the below code.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>
        Video Slide Animation Effect using 
        HTML, CSS, and JavaScript
    </title>

    <!--Style CSS -->
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="container">
        <video src="https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4"
            class="slider" autoplay loop muted>
        </video>

        <ul>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154455/Welcome-To-w3wiki-(1).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154455/Welcome-To-w3wiki-(1).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154736/Welcome-To-w3wiki-(2).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154736/Welcome-To-w3wiki-(2).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008155009/Welcome-To-w3wiki-(3).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008155009/Welcome-To-w3wiki-(3).mp4">
                </video>
            </li>
        </ul>
    </div>
    
    <script>
        function videoslider(links) {
            document.querySelector(".slider").src = links;
        }
    </script>
</body>

</html>

Step 2: Create the CSS file named style.css & add the below code.

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    background-color: #000000;
    justify-content: center;
    align-items: center;
}

.container .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.container ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}

.container ul li video {
    width: 200px;
    transition: all 0.3s;
}

.container ul li video:hover {
    transform: scale(1.1);
}

.video {
    width: 100%;
    height: 100%;
}

Complete Code to Design a Video Slide Animation Effect

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />

    <title>
        Video Slide Animation Effect using 
        HTML, CSS, and JavaScript
    </title>

    <!--Style CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100%;
            height: 100vh;
            position: relative;
            display: flex;
            background-color: #000000;
            justify-content: center;
            align-items: center;
        }

        .container .slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .container ul {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }

        .container ul li {
            list-style: none;
            cursor: pointer;
            margin: 10px;
        }

        .container ul li video {
            width: 200px;
            transition: all 0.3s;
        }

        .container ul li video:hover {
            transform: scale(1.1);
        }

        .video {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <video src="https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4"
            class="slider" autoplay loop muted>
        </video>

        <ul>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154349/Welcome-To-w3wiki-(0).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154455/Welcome-To-w3wiki-(1).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154455/Welcome-To-w3wiki-(1).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008154736/Welcome-To-w3wiki-(2).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008154736/Welcome-To-w3wiki-(2).mp4">
                </video>
            </li>
            <li onclick="videoslider('https://media.w3wiki.net/wp-content/uploads/20211008155009/Welcome-To-w3wiki-(3).mp4')">
                <video
                    src="https://media.w3wiki.net/wp-content/uploads/20211008155009/Welcome-To-w3wiki-(3).mp4">
                </video>
            </li>
        </ul>
    </div>

    <script>
        function videoslider(links) {
            document.querySelector(".slider").src = links;
        } 
    </script>
</body>

</html>

Output

Now, as you can see in the output, we have created a Video Slide Animation Using HTML, CSS, JavaScript in our webpage using CSS, which will attract users to a better user experience on the webpage.

Tags:

#CSS-Properties #CSS-Questions #HTML-Questions #JavaScript-Questions #CSS #HTML #JavaScript #Web Technologies