[JavaScript知识库]JavaScript--AOS.js页面滚动动画插件

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

1.引用

在html文件中引入css文件和js文件

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

<!--别忘了引入jQuery文件-->

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

2.页面中的使用

1.初始化AOS

<script>
	AOS.init();

	//下面是一些默认配置 也可以说是不想单独为每一个元素做动画配置时，统一配置所有元素的动画效果
	AOS.init({
	    // 全局配置:
	    disable: false, // 禁用。可取值: 'phone'、'tablet'、'mobile'、布尔值、表达式或函数
	    startEvent: 'DOMContentLoaded', // AOS 应初始化在 document 上绑定的事件名
	    initClassName: 'aos-init', // 初始化后使用的 class 类
	    animatedClassName: 'aos-animate', // 动画 class
	    useClassNames: false, // 值为 true，将添加滚动 `data-aos` 内容为 class
	    disableMutationObserver: false, // disables automatic mutations' detections (高级)
	    debounceDelay: 50, // 调整窗口大小时使用的 (高级)
	    throttleDelay: 99, // 滚动页面时使用的延迟 (高级)
	  
	    // 通过 'data-aos-*' 属性在每个元素上重写配置:
	    offset: 120, // 从原始触发点的偏移量 (px)
	    delay: 0, // 取值范围 0-3000, 每多 1 加 50ms
	    duration: 400, // 取值范围 0-3000, 每多 1 加 50ms
	    easing: 'ease', // AOS 动画默认 easing
	    once: false, // 向下滑动时，动画只发生一次
	    mirror: false, // 滚动到元素上方时是否应设置动画
	    anchorPlacement: 'top-bottom', // 定义与窗口有关的元素的哪个位置应触发动画

		//以下两个为额外配置
		
		//AOS被禁用的条件
			//可以传入三种设备类型：mobile、phone、tablet
			//也可以自己设置禁用条件，比如window.innerWidth < 1024 屏幕小于1024像素时禁用
			//也可以传入一个函数，返回true或者false
		disable:false,
		//AOS被初始化的事件名称
			//如果不想滚动动画从页面加载(DOMContentLoaded)后就开始执行，可以使用这个来设置，AOS会在document上监听这事件
		startEvent:DOMContentLoaded,
	});
</script>

2.使用data-aos属性设置动画(在标签中的使用)

<!--fade-in是动画名字，使用哪个写哪个即可，在页面滚动时，会在该元素上触发相应的动画-->
<!--data前缀是为HTML5校验的问题-->
<div data-aos="fade-in"></div>

<!--使用data-aos-*来调整-->
<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-once="false"
    data-aos-anchor-placement="top-center">
    这里对上述属性做一个解释：
    	aos-offset：是立刻触发动画还是在指定时间之后触发动画
    	aos-delay：动画延迟的时间
    	aos-duration：动画持续时间
    	aos-easing：动画的easing动画效果
    	aos-once：动画是否只会触发一次，或者每次上下滚动都会触发
    	aos-anchor-placement：锚位置，触发动画时元素位于屏幕的位置
</div>

<!--还有一个只能用在每个元素基础上的配置属性：锚点-->
<div data-aos="fade-up" data-aos-anchor=".other-element"></div>
<!--这样可以在滚动到另一个元素时触发某一元素动画，对固定位置元素挺有用的-->

3.API(使AOS对象成为全局变量的三种方式)

AOS.init()//初始化
AOS.refresh()//重新计算元素的所有偏移量和位置(在窗口调整大小时使用)
AOS.refreshHard()//使用AOS元素和触发器重新初始化数组refresh(调整与DOM变化相关的aos元素)

4.自定义动画

添加自定义动画
可以自定义自己需要的动画。
例：根据分辨率不同在一个盒子里需要两种不同的动画
1.在js中自定义动画

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

2.在html中使用

<div data-aos="new-animation"></div>

此时该元素只为移动端的opacity设置动画，从768px开始该元素也会从右向左滑动

添加自定义easing

[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}

5.注意事项

设置：duration，delay

/*添加css 增加持续时间*/
 body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
 }

上述代码将添加4000ms的duration时间，可供在AOS元素上设置，或在初始化AOS脚本时设置为全局duration时间。

注：[data-aos][data-aos]并不是语法错误，这是一种技巧，可以使单个配置比全局配置更重要，就不需要标明!important

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

3.动画、easings效果点击这个链接

jQuery插件库的链接点这里

对AOS.js插件的使用做一次记录

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系