Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design a video slide animation effect using HTML CSS JavaScript?
In this tutorial, we will be discussing how to create a video slide animation effect using HTML, CSS, and JavaScript. This can be used to create a simple yet effective way to grab attention and engage viewers.
Applying the Animation Effect
To apply the animation effect, we will be using a keyframe rule. This will tell the browser to change the CSS properties of an element over a period of time. In our case, we want the video to slide across the screen, so we will be using the transform property.
What is the Keyframe Rule?
The keyframe rule is used to specify the CSS properties that will be changed over the course of the animation. In our case, we want the video to slide from left to right, so we will be using the following CSS −
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
Applying the Keyframe Rule to the Video Element
Now that we have our keyframe rule, we need to apply it to the video element. We do this by using the animation property, and we set the name of the keyframe rule (“slide”), the duration (4 seconds), and the timing function (ease-in-out) −
video {
animation: slide 4s ease-in-out;
}
Adding a Play/Pause Button
Now that we have our video sliding across the screen, we want to be able to control it. We can do this by adding a play/pause button that will start and stop the video animation.
We start by creating a button element and giving it an id of “play” −
<button id="play">Play</button>
Then, we add some CSS to style the button −
#play { background-color: #fff; border: none; color: #000; cursor: pointer; font-size: 16px; padding: 10px; }
Finally, we add some JavaScript to toggle the playing state of the video −
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"; } });
Algorithm
STEP 1 − We first create the video element and give it an id of “video”. Then, we add the two source elements for the video.
STEP 2 − Next, we create the button element and give it an id of “play”. Then, we add some CSS to style the button. We set the background color to white, the color to black, the font size to 16px, and we add a padding of 10px.
STEP 3 − After that, we add some JavaScript to toggle the playing state of the video. We start by getting a reference to the video and play elements. Then, we add an event listener for the “click” event.
STEP 4 − Inside the event listener function, we check to see if the video is paused. If it is, we call the play() method on the video element, and we set the innerHTML of the play button to “Pause”. If the video is not paused, we call the pause() method on the video element, and we set the innerHTML of the play button to “Play”.
STEP 5 − Finally, we add the keyframe rule and apply it to the video element. We set the name of the keyframe rule to “slide”, the duration to 4 seconds, and the timing function to “ease-in-out”
This will create a simple animation that will make the video slide from left to right across the screen.
Example
Below is the full working program to design a video slide animation effect using HTML, CSS, and JavaScript.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <script src="main.js"></script> </head> <body> <video id="video" width="400" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <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> <style> @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } } video { animation: slide 4s ease-in-out; } #play { background-color: #fff; border: none; color: #000; cursor: pointer; font-size: 16px; padding: 10px; } </style> </body> </html>
In this tutorial, we discussed how to create a video slide animation effect using HTML, CSS, and JavaScript. This can be used to create a simple yet effective way to grab attention and engage viewers.
871 Views
