aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。

安装

yarn add aos@next

或者

npm install --save aos@next

import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();

手动添加

文件下载地址：https://download.csdn.net/download/admans/20398230

<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>

示例

<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600">
<div aos="flip-left" aos-delay="100" aos-anchor=".example-selector">
<div aos="fade-up" aos-anchor-placement="top-center">

如果你担心HTML5校验的问题，可以为上面的属性添加data-前缀。

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

  <divdata-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>

参数说明

AOS.init({// 全局设置disable: false, // 禁用条件 'phone', 'tablet', 'mobile', boolean, 表达式 或 函数startEvent: 'DOMContentLoaded', // 初始化的事件名称initClassName: 'aos-init', animatedClassName: 'aos-animate', useClassNames: false, disableMutationObserver: false, debounceDelay: 50, // 调整窗口大小时为防止抖动延迟时间throttleDelay: 99, // 滚动页面时 延迟时间offset: 120, // 是立刻触发动画还是在指定时间之后触发动画delay: 0, // 动画的延迟时间duration: 400, // 动画持续时间easing: 'ease', // 动画的easing动画效果once: false, // 动画是否只会触发一次,或者每次上下滚动都会触发mirror: false, // 锚元素。使用它的偏移来取代实际元素的偏移来触发动画anchorPlacement: 'top-bottom', // 锚位置,触发动画时元素位于屏幕的位置});

动画及效果

Fade 动画:

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip 动画:

flip-up
flip-down
flip-left
flip-right

Slide 动画:

slide-up
slide-down
slide-left
slide-right

Zoom 动画:

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

锚点位置:

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Easing 效果:

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

项目Github地址：https://github.com/michalsnik/aos

CSS3 动画插件 aos.js相关推荐

一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
Minimit Anima – 硬件加速的 CSS3 动画插件
Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...
动画插件wow.js的使用方法
动画插件wow.js的使用方法 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址: http ...
jquery轻量级数字动画插件 —— countUp.js
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址:https://github.com/i ...
html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果使用方法在页面中引入 ...
css3特效插件wow.js
在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
Bounce.js-可视化CSS3动画代码生成js插件
Bounce.js是一款功能非常强大的可视化 CSS3动画代码生成js库插件.该js库插件提供了一个在线APP,通过该APP可以在可视化的条件下编辑CSS3的各种动画效果.此外,你也可以单独使用Bou ...
开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换
开发工具与关键技术: HTML CSS3 JQUERY JS 作者:冉启东撰写时间:2019年1月18日 1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下: ...

CSS3 动画插件 aos.js

安装

手动添加

示例

参数说明

动画及效果

CSS3 动画插件 aos.js相关推荐

最新文章

热门文章