Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to design a video slide animation effect using HTML CSS JavaScript?
In this tutorial, we will learn how to create a captivating video slide animation effect using HTML, CSS, and JavaScript. This animation makes a video element slide smoothly across the screen, creating an engaging visual effect for web applications.
Understanding CSS Keyframes
The foundation of our animation is CSS keyframes. A keyframe rule defines how CSS properties change over time during an animation. For our sliding video, we'll use the transform property with translateX() to move the video horizontally.
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
This keyframe moves the video from completely off-screen on the left (-100%) to completely off-screen on the right (100%).
Applying Animation to Video Element
To apply our keyframe animation to the video element, we use the animation property:
video {
animation: slide 4s ease-in-out;
}
This applies the "slide" animation over 4 seconds with smooth acceleration and deceleration.
Adding Interactive Controls
To make the video interactive, we'll add a play/pause button with JavaScript functionality:
var video = document.getElementById("video");
var play = document.getElementById("play");
play.addEventListener("click", function() {
if (video.paused) {
video.play();
play.innerHTML = "Pause";
} else {
video.pause();
play.innerHTML = "Play";
}
});
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video Slide Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
overflow-x: hidden;
}
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
video {
animation: slide 4s ease-in-out infinite;
width: 400px;
height: auto;
}
#play {
background-color: #007bff;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
margin-top: 20px;
transition: background-color 0.3s;
}
#play:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Video Slide Animation Demo</h1>
<video id="video" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<br>
<button id="play">Play</button>
<script>
var video = document.getElementById("video");
var play = document.getElementById("play");
play.addEventListener("click", function() {
if (video.paused) {
video.play();
play.innerHTML = "Pause";
} else {
video.pause();
play.innerHTML = "Play";
}
});
</script>
</body>
</html>
Key Animation Properties
| Property | Value | Description |
|---|---|---|
animation-name |
slide | References the @keyframes rule |
animation-duration |
4s | Animation completes in 4 seconds |
animation-timing-function |
ease-in-out | Smooth start and end |
animation-iteration-count |
infinite | Animation repeats continuously |
Enhanced Variations
You can customize the animation by modifying the keyframes:
/* Bounce effect */
@keyframes bounceSlide {
0% { transform: translateX(-100%); }
50% { transform: translateX(10%); }
100% { transform: translateX(100%); }
}
/* Fade and slide */
@keyframes fadeSlide {
from {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
Browser Compatibility
CSS animations are well-supported across modern browsers. For older browsers, consider adding vendor prefixes like -webkit- for WebKit-based browsers.
Conclusion
This video slide animation effect combines CSS keyframes with JavaScript interactivity to create an engaging user experience. The technique can be adapted for various sliding animations and provides a foundation for more complex video presentations.
1K+ Views
