AOS.JS

Animation of Scroll 基于CSS3 animation,不支持低版本浏览器;
和基于Animation.css的收费库WOW.JS相似,但有自己的特色;

npm官网 aos.js

  • 安装
    npm i aos --save

  • 手动添加

<link rel='stylesheet' href='_base_file_/aos.css'>
<script src='_base_file_/aos.js'>script>
<script>
	AOS.init();
script>
  • 配置
  1. 默认
AOS.init({
	offset:120,//px,提前或延迟触发
	duration:400,//ms,过渡时间,50-3000
	easing:ease,//时间曲线
	delay:0,//s,延迟执行
	anchor:null//body,指定元素触发,Element
	anchor-placement:top-bottom,//top向bottom滚动,top和bottom触发,top|center|bottom任意二个组合,分先后方向,可重复如center-center
	once:false//是否仅触发一次
})
  1. 自定义过渡时间,取消50-3000的限制
    例如:5秒
body[data-aos-duration='5000'] [data-aos], [data-aos][data-aos][data-aos-duration='5000']{
    transition-duration: 5000ms;
  }

小技巧:俩[data-aos]的写法,提高优先级,不必!important

  1. 应用到元素
<div data-aos="animation_name">

默认配置项,前加data-aos-,作用到元素

  • API
    AOS.init()
    AOS.refresh() 窗口大小改变时,AOS默认监听,可以手动执行
    AOS.refreshHard()

  • 其他

  1. 禁用
AOS.init({
	disable:false,//禁用,false|mobile|phone|tablet
	//或者,自定义规则
	disable:window.innerWidth > 400
	//或者,传入函数,return false|true
	disable:function(){
		returen window.innerWidth > 400
	}
})
  1. 自定义初始化触发事件
	AOS.init({
		//默认 DOMContentLoaded 事件,
		// 指定 某事件触发后,触发AOS初始化
		startEvent: "Element_Event"
		//例如,window的load事件
		startEvent: "load"
	})
  • 动画列表:data-aos:
  1. fade类:fade、fade-up、fade-down、fade-left、fade-right、fade-up-left、fade-up-right、fade-down-left、fade-down-right
  2. flip类:flip-up、flip-down、flip-left、flip-right
  3. slide类:slide-up、slide-down、slide-left、slide-right
  4. 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
  • 时间曲线:data-aos-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

你可能感兴趣的:(JS)