Do you like animations on web pages? If so, then you must read this article. I think animation can improve the user experience to a greater extent and make the software you develop operate more smoothly. So how to add and where to add animation will be a big problem. I will show you one by one.
First, we need to understand the principles of animation. It moves an object from one place to a specific place, and the process of this movement is animation. So how do we set the location of an object? The answer will be combined in CSS, HTML and Javascript.
Here is base code in HTML:
Let us take a look at the home page’s CSS settings.
The first thing is the #homepage, we will set the background color to green so that we can observe the animation changes.
This is the basic setting of the current homepage.
— We set the position property of the object to fixed.
— The width is one hundred percent of the current container / parent.
— The height is the height of the screen.
— Opacity is 1. (not transparent)
— There is a transition property , where I will set the duration of the animation 1s = 1 second.
In the beginning, we also mentioned the need to specify a specific location (origin) to trigger the animation.
We will add a class next to the #homepage selector, and this is how to control the animation. There are only some basic settings inside the #homepage right now, and they are set in the currently visible screen. Now, we have to add a new class as a new combination to overwrite the previous settings. The modified difference of each property is the production of animation.
We will use transform to tigger the animation and move the homepage!
— transformX( -100 %) will move the current object to the X axis to 👈.
— scale(0), scale down the current object to 0% = disappear.
Then the transparency is zero, and it takes 1 second to go directly from 1 to 0 = disappear.
So how should we add this class slideLeft to the HTML? Javascript is the answer. Rest assured, we will only use a little JS. I have explained the logic of each line of code in the picture.
And the most important thing is to have more practice, practice and practice.
Please try it in your own and here is the link to codesandbox:
