使用AOS在鼠标滚动时使div动画

AOS是一个小型库，可以在页面滚动时为元素添加动画效果。

AOS允许您在向下和向上滚动时为元素添加动画效果。如果您滚动回顶部，元素将动画到其先前的状态，并且如果您向下滚动，它们将准备好再次动画。

安装： 安装AOS非常简单：

在网页的head标签中添加以下标签。

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

在关闭</head>标签之前添加脚本并初始化AOS：

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

就是这样，现在您已经成功在您的Web应用程序中安装了AOS。

使用data-aos属性设置动画：

<div data-aos="fade-in"></div>

示例： 下面是一个示例，以演示动画效果。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "https://unpkg.com/aos@next/dist/aos.css" /> 
  
    <script src= 
        "https://unpkg.com/aos@next/dist/aos.js"> 
    </script> 
  
    <script> 
        AOS.init(); 
    </script> 
      
    <style> 
        body { 
            padding: 100vh 0; 
        } 
  
        div { 
            margin: 0 auto; 
            color: #fff; 
            padding: 100px; 
            font-size: 25px; 
            width: 50%; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div data-aos="zoom-in"> 
        Geeks for geeks 
    </div> 
</body> 
  
</html>

输出：

使用AOS在鼠标滚动时使div动画