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
Design a Letter Hover Effect using HTML CSS and JavaScript In this article, we will learn to implement the bouncing letter hover effect using simple HTML, CSS, and JavaScript. HTML is used to create the structure of the page, CSS is used to set the styling and JavaScript is used for animation. Approach to Create the Bouncing Letter Hover EffectHTML Code: To
2 min read
How to Create Text Animation Effect using JavaScript ? Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a
2 min read
Design a Video Calling Website UI Template using HTML and CSS In this tutorial, we will learn the process of building a UI template for a Video Calling Website using HTML and CSS. Our goal is to create an attractive and user-friendly interface that makes video calls an enjoyable experience. The website will have a navigation bar with quick-access icons, a main
4 min read
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 bind an animation to a division element using CSS ? In this article, we will learn to bind an animation to a div tag using CSS.A div tag is used to separate the different sections of the contents of the webpage. It makes it very easy for the readers to notice the different sections of the webpage with their specific importance levels on the page. The
3 min read
How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and
3 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
How to Create Loading Blur Text Animation Effect using HTML and CSS? The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS.Approach: The approach to create loading blur tex
3 min read
Loading Text Animation Effect using CSS There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim
3 min read