Open In App

Design a video slide animation effect using HTML CSS JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.



Last Updated : 09 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads