前言

相信很多人都会看到在滑动网站时，滑到一个地方就会出现动画，滑回去再滑回来又会再出现一次，
那这到底是怎麽做的呢 ?? 於是我就找到一个不用写JavaScript或JQuery也能达成的插件 AOS.js
先给大家看一下范例网站 --> https://michalsnik.github.io/aos/

前置作业

程序码中加入下方这段即可

<script>
  AOS.init();
</script>

fade

当网页卷动到这个元素时，产生动画的效果有很多种，那我先提出几种，其他想知道的去官往查罗

<div data-aos="fade-up"></div> --> Div往上 fade in
<div data-aos="fade-down"></div> --> Div往下 fade in
<div data-aos="fade-left"></div> --> Div往左 fade in
<div data-aos="fade-up-left"></div> --> Div往右 fade in

翻转

<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>
<div data-aos="flip-left"></div>

Zoom in zoom out

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>

动画基本设定

data-aos-duration="3000" // 动画的持续时间，default is 400ms
data-aos-easing="linear" // 动画的速度曲线，default is ease
data-aos-offset="300" // 调整本来触发点的offset(in px)，default is 120
data-aos-delay="300" // 动画的延迟启动时间，default is 0

动画在视窗的哪个位置会被启动

data-aos-anchor-placement="top-bottom" 
data-aos-anchor-placement="center-bottom"
data-aos-anchor-placement="bottom-bottom"

”top-bottom” 指的是「该元素的顶端」在浏览器的下方，启动动画
”center-bottom” 指的是「该元素的中间」在浏览器的下方时，启动动画
”bottom-bottom” 指的是「该元素的底部」在浏览器的下方时，启动动画
也可以是 “top-center” “center-center” “bottom-center”
以此类推....

这样就不用自己写 JavaScript 或 JQuery 也能完成我们的动画啦
那我们铁人赛Day29见罗!!