Design a video slide animation effect using HTML CSS JavaScript - GeeksforGeeks

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="https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4"              class="slider" autoplay loop muted>      </video>        <ul>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4')">          <video src= "https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(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:
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="https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4"              class="slider" autoplay loop muted>      </video>        <ul>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4')">          <video src="https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4">          </video>        </li>        <li onclick="videoslider('https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4')">          <video src= "https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(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.
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)