Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Design a video slide animation effect using HTML CSS JavaScript

  • Last Updated : 09 Nov, 2021

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.

Example: Now we will see how to create Video Slide Animation Using HTML, CSS, JS on any webpage.

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>
    <!-- All Meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Free Web tutorials" />
    <meta name="keywords" content="HTML, CSS, JavaScript" />
    <meta name="author" content="John Doe" />
  
    <title>Video Slide Animation Using HTML | CSS | JS</title>
  
    <!--Style CSS -->
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <video src=
             class="slider" autoplay loop muted>
      </video>
  
      <ul>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </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:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- All Meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Free Web tutorials" />
    <meta name="keywords" content="HTML, CSS, JavaScript" />
    <meta name="author" content="John Doe" />
  
    <title>Video Slide Animation Using HTML | CSS | JS</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=
             class="slider" autoplay loop muted>
      </video>
  
      <ul>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </video>
        </li>
        <li onclick="videoslider
          <video src=
          </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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!