页面滚动加载动画，顾名思义就是鼠标滚动，内容慢慢加载。示例网站https://www.chemfineinternational.com.cn/
首选需要了解下animate.css，一款CSS3的动画库。animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单，当前版本为v4。
使用npm安装:
npm install animate.css --save
使用yarn安装:
yarn add animate.css
animate.css的详细使用本文就不再赘述，感兴趣的同学可以去github上看下。
Animate On Scroll Library（AOS），Github仓库https://github.com/michalsnik/aos
多种安装方式如下
yarn add aos npm install aos --save bower install aos --save
也可以直接CDN应用css和js文件
CSS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
页面初始化加载aos，其中一些效果，执行时间等可以设置一个默认值。
<script>
/**
* Animation on scroll
*/
window.addEventListener('load', () => {
AOS.init({
duration: 1000, //执行时长
easing: 'ease-in-out', //默认动画效果，可以参照animate.css中的各类动画
once: true,
mirror: false
})
});
</script>
最后在要进行动画的元素上加上data-aosj即可，其中第一条为必选。
<div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center" > </div>
如此，一个滚动动画加载即完成了。
注意事项
动画可以极大地改善界面的用户体验，但重要的是要遵循一些指导方针，不要过度使用动画并降低用户在 Web 上的体验。遵循以下规则应该是一个良好的开端。
1、有意义的动画
动画应该明确意图，比如利用弹跳、闪光、脉冲等之类的动画将用户的注意力吸引到界面中的特殊事物上。应该使用进入和退出动画来定位界面中正在发生的事情，清楚地表明它正在过渡到一个新状态。简单说，只要确保动画不会妨碍用户，并且页面的性能不会因过度使用动画而受到影响。
2、不要为大型元素设置动画
避免使用它，因为它不会给用户带来太多价值，而且可能只会造成混淆。除此之外，动画很可能是垃圾，最终导致糟糕的用户体验。
3、不要在body和html上设置动画
动画<html>或<body>标签是可以执行的，但你应该避免它。因为这类动画在部分浏览器上会出现莫名其妙的错误。此外，使整个页面动画实际用户体验并不好。
4、应避免无限动画
尽管 Animate.css 提供了用于重复动画（包括无限动画）的实用程序类，但您应该避免无休止的动画。它只会分散您的用户的注意力，循环的动画很多时候让人很反感。
5、注意元素的初始和最终状态
所有 Animate动画都包含一个名为 的 CSS 属性animation-fill-mode，它控制动画前后元素的状态。您可以在此处阅读更多相关信息。Animate.css 默认为animation-fill-mode: both，但您可以更改它以满足您的需要。
6、不要禁用prefers-reduced-motion媒体查询
从 3.7.0 版本开始，Animate.css 支持prefers-reduced-motion媒体查询，该查询根据操作系统系统对支持浏览器的偏好（大多数当前浏览器都支持）禁用动画。这是一项重要的辅助功能，不应禁用！
下一篇：2022年主流前端框架介绍
相关阅读
当今 Web 开发的两个主要目标是优秀的用户体验和快速的上线。使用前端开发框架能够明显的有助于实现这两个目标。目前可用的前端框架的数量太多太多，选择上令人困惑。哪个才是最好的？
您在寻找一种可以满足电脑、手机、平板的多端浏览的网站模板？那么它就是响应式网站，您只需要维护一套代码和数据，即可多端完美展现
Bootstrap是非常棒的前端组件用于构建响应式网站，目前我们伟致开发的响应式网站基本也都是采用Bootstrap。针对大显示器，我们需要增加多个breakpoint，让页面更加美观