Add animation on scroll using HTML, CSS and AOS.js

AOS.js (Scroll Animation) is a JavaScript library that provides animations, making it easier just by changing the class name in the desired div tag Add a lot of animations to add animations. While there are different animation JavaScript libraries, AOS.js is probably the simplest of them all.

In this tutorial, we will explore the different types of animations that can be used in AOS.js with the help of different examples.

The first type of animation we will explore is the fade animation. Before doing that, we first need to make sure that aos.css and aos.js are available in our code and that we can get them via a CDN link.

Simply paste the following code snippet at the end of the

tag in your HTML code.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

The above code snippet will help to get the css file, in order to get the js file we need to paste the CDN code snippet as shown below at the end of the body tag in the HTML code .

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
   AOS.init();
</script>

After adding the above two code snippets to the HTML code, we can use AOS in the code.

Use AOS.js fade animation

The fade-in and fade-out animation simulates the fade-in and fade-out behavior, and a total of 8 different animations can be achieved. these are -

• fade in and fade out

• fade in and fade out

• Fade left

• Fade right

• Fade left

• Fade right

• Fade left

• Fade left

Now let’s use them one by one in a simple HTML-CSS example.

The code snippet below is the only part where we will make changes to all the above fade animations.

<div id="main">
   <div data-aos="fade-up">Something up!</div>
</div>

In the above code, we pass the value as "fade-up" to the data-aos attribute, and in all fade cases, only this value will be changed.

index.html

Now, let's consider the following index.html file where we will perform a "fade out" animation.

Example

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Something Up!
   
   
   <script>
      AOS.init();
   </script>

When you run the above code in your browser, you should see a div containing the text "Something Up!" appearing in an upward direction with a fade animation.

Similarly, if we want to perform a fade animation, we can use the one shown in the code snippet below.

<div id="main">
   <div data-aos="fade-down">Something down!</div>
</div>

We only need to replace the div in the index.html file with the above div to get the fade animation.

For Fade to the left, the code snippet looks like this.

<div id="main">
   <div data-aos="fade-left">Something left!</div>
</div>

For the fade, the code snippet is as follows.

<div id="main">
   <div data-aos="fade-right">Something right!</div>
</div>

For Fade-up-left, the code snippet is shown below.

<div id="main">
   <div data-aos="fade-up-left">Something up left!</div>
</div>

For Fade-up-right, the code snippet is shown below.

<div id="main">
   <div data-aos="fade-up-right">Something up right!</div>
</div>

For Fade left, the code snippet looks like this.

<div id="main">
   <div data-aos="fade-down-left">Something down left!</div>
</div>

For Fade-down-right, the code snippet is shown below.

<div id="main">
   <div data-aos="fade-down-right">Something down right!</div>
</div>

At this point, we can conclude that the fade animation in AOS has been completed.

Use AOS.js flip animation

Flip animation simulates flipping behavior, and a total of 4 different animations can be achieved. these are -

• On the turn

• Turn down

• Flip left

• Turn right

Now let’s use them one by one in a simple HTML-CSS example.

index.html

Let's consider the following index.html file where we will perform a "flip up" animation.

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Flip Up!
   
   
   <script>
      AOS.init();
   </script>

When you run the above code in your browser, you should see a div with the text "Flip Up!" Appears with a flip animation in the upward direction.

Similarly, if we want to do a flip-down animation, we can use the one shown in the code snippet below.

<div id="main">
   <div data-aos="flip-down">Flip down!</div>
</div>

For left flipping, the code snippet is as follows.

<div id="main">
   <div data-aos="flip-left">Flip left!</div>
</div>

For right flipping, the code snippet is as follows.

<div id="main">
   <div data-aos="flip-right">Flip right!</div>
</div>

Using AOS.js scaling animation

Zoom animation simulates zoom behavior, and a total of 8 different animations can be achieved. these are -

• enlarge
• enlarge
• Zoom
• Zoom left
• Zoom right
• Zoom
• enlarge
• Zoom
• Zoom left
• Zoom right

Now let’s use them one by one in a simple HTML-CSS example.

index.html

Let us consider the following index.html file where we will perform a "zoom in" animation.

Example

   
   
   
   
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   


   

      
Zoom in!
   
   
   <script>
      AOS.init();
   </script>

When we run the above code in the browser, we should see a div with the Text Zoom pointing upwards in its zoom animation.

Similarly, if we want to perform a zoom-in animation, we can use the one shown in the code snippet below.

<div id="main">
   <div data-aos="zoom-in-up">Zoom in up!</div>
</div>

For zoom, the code snippet is shown below.

<div id="main">
   <div data-aos="zoom-in-down">Zoom in down!</div>
</div>

For Zoom to the left, the code snippet looks like this.

<div id="main">
   <div data-aos="zoom-in-left">Zoom in left!</div>
</div>

For zoom to the right, the code snippet looks like this.

<div id="main">
   <div data-aos="zoom-in-right">Zoom in right!</div>
</div>

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-out">Zoom out!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-up">Zoom out up!</div>
</div>

对于缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-down">Zoom out down!</div>
</div>

对于向左缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-left">Zoom out left!</div>
</div>

对于向右缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-right">Zoom out right!</div>
</div>

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

<div id="main">
   <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>

结论

在本教程中，我们演示了如何借助 AOS.js、HTML 和 CSS 创建滚动动画。

The above is the detailed content of Add animation on scroll using HTML, CSS and AOS.js. For more information, please follow other related articles on the PHP Chinese website!