【前端开发】页面滚动加载动画AOS的应用

FireShot Capture 002 - AOS - Animate on scroll library - michalsnik.github.io.png

页面滚动加载动画,顾名思义就是鼠标滚动,内容慢慢加载。示例网站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媒体查询,该查询根据操作系统系统对支持浏览器的偏好(大多数当前浏览器都支持)禁用动画。这是一项重要的辅助功能,不应禁用!