Design a Video Slide Animation Effect using HTML CSS and JavaScript
Last Updated :
25 Jul, 2024
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.
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.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 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.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.
Similar Reads
How to create Frame by Frame Animation using CSS and JavaScript ? Frame by frame animation is a technique where a set of images are shown, one by one in a particular order, maintaining fixed time interval gaps between two consecutive images, to make an illusion of motion to the eyes. Now, in a more technical way, we can say that frame-by-frame animation is a techn
2 min read
How to use Animation and Transition Effects in CSS ? With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users' attention and directing them through your material, these effects may make your website more d
4 min read
How to slide down the page after video ends using JavaScript ? Given a web page, the task is to initiate the slider only after the video ends with JavaScript.SyntaxIn HTML:<video onended="myScript">In JavaScript:1. Using custom function:video.onended=function(){myScript};2. Using the addEventListener() method:video.addEventListener("ended", myScript);Algo
4 min read
Create Effect of Particle Animation using CSS At least once, you must have seen a website with particles appearing and disappearing in its background. This cool particle animation may seem complicated but it is actually quite easy to make. In this article, we will set an image as the background of our body, and on it, we will have particles mov
6 min read
How to Design Fade balls loader Animation using CSS ? Minimal Fading balls loader is a basic CSS animation, where the loader animation will be utilized to engage the user until when a specific page or content is fully get loaded in a particular platform. In this article, we will see how to create a loader animation with three balls animation effect whi
2 min read
Fading Text Animation Effect Using CSS3 The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in
2 min read