There are several really great JavaScript libraries that make moving objects around on the screen really easy. Anime.Js is the best example I can think of.

In this series of articles, we will be creating an animation engine that can create dynamic video content programmatically.

An Birds-Eye-View of The Code so Far

image.png
Image Credit: [ShoeMedia]

The first thing we want to do is include both jQuery and Anime.js into our file. These libraries will make things a lot easier.

image.png
Image Credit: [ShoeMedia]

After that, we want to start our HTML and BODY tags.

image.png
Image Credit: [ShoeMedia]

Then, we create a new div with a class of ‘video’.

image.png
Image Credit: [ShoeMedia]

At the top of the page, we have the CSS defined in some tags.</p>

image.png
Image Credit: [ShoeMedia]

Here, we are removing the default margin and padding for the body.

image.png
Image Credit: [ShoeMedia]

Then, we set the position of the ‘video’ div to ‘absolute’. This is so we can move it around. Then we set the ‘video’ div’s background color to black. After that, make set the ‘video’ div to start 5% from the left and 5% from the top. Finally, we set the width of the ‘video’ div to 90% of the width of the page.

Notice That We Did Not Set a Height For The ‘Video’ Div

That’s because down at the of bottom the file, we set the CSS of the ‘video’ div with JavaScript.

image.png
Image Credit: [ShoeMedia]

As you can see in the image above, we have set the width of the ‘video’ div to whatever the height of the ‘video’ div is divided by 1.777777777777778.

Yeah, But Why 1.777777777777778?

Well, that’s a good question. Seeing as the purpose of this project is to create a Javascript-based video animation engine, the ideal default ratio of the video window is 16:9. And yes, you guessed it. When you divide 16 by 9 you get 1.777777777777778.

So, that means if the height of the ‘video’ window is whatever it’s height is divided by that number, it will always have a 16:9 aspect. And remember, in the CSS we defined the ‘video’ div’s width as 90% of the window.

Great! Our Video Window Works, Sorta

image.png
Image Credit: [ShoeMedia]

As you can see in the image above, everything looks as it should. But what happens when you scale the window?

noscale.gif

As you can see, when the window is resized, the video window does not scale proportionally.

That’s was these few lines of code are for:

image.png
Image Credit: [ShoeMedia]

The code above runs the same height scale function on the ‘video’ div every time the window is resized.

Here is the result:

scale.gif

Check this out: The State of Information Technology in 2020

Leave a Reply

Your email address will not be published. Required fields are marked *