AOS.js页面滚动元素动画jQuery动画库

正文 14053字数 1,018,522阅读

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

使用方法
在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>

Run code

Cut to clipboard

文件打包下载

HTML结构
要使用aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如：

1
<div aos="animation_name">

Run code

Cut to clipboard

aos脚本将会在页面滚动时，在该元素上触发相应的动画。

在元素上还可以添加以下一些属性：
属性属性属性默认值
aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
aos-duration 动画持续时间 600 400
aos-easing 动画的easing动画效果 ease-in-sine ease
aos-delay 动画的延迟时间 300 0
aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
aos-anchor-placement 锚位置，触发动画时元素位于屏幕的位置 top-center top-bottom
aos-once 动画是否只会触发一次，或者每次上下滚动都会触发 true false
注意，aos-duration的动画持续时间的范围从50-3000毫秒，如果你想设置更大的值，可以在页面中添加下面的CSS代码：

body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{
  transition-duration: 4000ms;
}

Run code

Cut to clipboard

上面的代码将动画的持续时间修改为4000毫秒。

示例代码：

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

Run code

Cut to clipboard

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

<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">

Run code

Cut to clipboard

全局配置
如果你不想单独每个元素做一个动画配置，你可以通过init()方法来统一配置所有元素的动画效果。

AOS.init({
  offset: 200,
  duration: 600,
  easing: 'ease-in-sine',
  delay: 100,
});

Run code

Cut to clipboard

额外配置
AOS提供了2个额外的配置方法，这些方法只能够在初始化时使用。

配置描述示例值默认值
disable AOS被禁用的条件 mobile false
startEvent AOS被初始化的事件名称 exampleEvent DOMContentLoaded
禁用AOS：

如果你项在小屏幕设备中禁用AOS，可以：

AOS.init({
  disable: 'mobile'
});

Run code

Cut to clipboard

你可以传入3种设备的类型：mobile、phone或tablet。

你也可以设置自己的禁用条件，例如在屏幕小于1024像素时禁用AOS：

disable: window.innerWidth < 1024

Run code

Cut to clipboard

或者传入一个函数，返回true或false。

disable: function () {
    var maxWidth = 1024;
    return window.innerWidth < maxWidth;
}

Run code

Cut to clipboard

开始动画的事件：
如果你不想滚动动画从页面加载（DOMContentLoaded）后就开始执行，可以使用startEvent来设置自己的事件，AOS会在document上监听这个事件：

AOS.init({
  startEvent: 'someCoolEvent'
});

Run code

Cut to clipboard

API
AOS对象有2个可用的方法：
init
refresh

AOS.refresh();

Run code

Cut to clipboard

上面的代码会重新计算元素的位置和偏移。

动画和锚位置
动画

淡入淡出动画：

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

翻转动画：

flip-up

flip-down

flip-left

flip-right

滑动动画：

slide-up

slide-down

slide-left

slide-right

缩放动画：

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

你可以使用以下的一些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项目效果预览 Github下载搬运工

完整html代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="dist/aos.css" />
<link rel="stylesheet" href="css/styles.css" />

</head>
<body>
<header class="hero">
  <div class="hero-center">
    <h1 style="font-family:Microsoft YaHei">aos.js-超赞页面滚动元素动画jQuery动画库</h1>
    <h2 class="hero__text" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
  </div>
  <span class="hero__scroll" aos="fade-up" aos-easing="ease" aos-delay="800"> Scroll down <br>
  <i class="chevron bottom"></i> </span> </header>
<section class="section section--code">
  <div class="container">
    <h2 class="section-title">Fade</h2>
    <div class="code code--small code--left" aos="fade-up">
      <code class="html"><div aos="fade-up"></div></code>
    </div>
    <div class="code code--small code--right" aos="fade-down">
      <code><div aos="fade-down"></div></code>
    </div>
    <div class="code code--small code--left" aos="fade-right">
      <code><div aos="fade-right"></div></code>
    </div>
    <div class="code code--small code--right" aos="fade-left">
      <code><div aos="fade-left"></div></code>
    </div>
    <div class="code code--small code--left" aos="fade-up-right">
      <code><div aos="fade-up-right"></div></code>
    </div>
    <div class="code code--small code--right" aos="fade-up-left">
      <code><div aos="fade-up-left"></div></code>
    </div>
    <div class="code code--small code--left" aos="fade-down-right">
      <code><div aos="fade-down-right"></div></code>
    </div>
    <div class="code code--small code--right" aos="fade-down-left">
      <code><div aos="fade-down-left"></div></code>
    </div>
  </div>
</section>
<section class="section section--code">
  <div class="container">
    <h2 class="section-title">Flip</h2>
    <div class="code code--small code--left" aos="flip-left">
      <code><div aos="flip-left"></div></code>
    </div>
    <div class="code code--small code--right" aos="flip-right">
      <code><div aos="flip-right"></div></code>
    </div>
    <div class="code code--small code--left" aos="flip-up">
      <code><div aos="flip-up"></div></code>
    </div>
    <div class="code code--small code--right" aos="flip-down">
      <code><div aos="flip-down"></div></code>
    </div>
  </div>
</section>
<section class="section section--code">
  <div class="container">
    <h2 class="section-title">Zoom</h2>
    <div class="code code--small code--left" aos="zoom-in">
      <code><div aos="zoom-in"></div></code>
    </div>
    <div class="code code--small code--right" aos="zoom-in-up">
      <code><div aos="zoom-in-up"></div></code>
    </div>
    <div class="code code--small code--left" aos="zoom-in-down">
      <code><div aos="zoom-in-down"></div></code>
    </div>
    <div class="code code--small code--right" aos="zoom-in-left">
      <code><div aos="zoom-in-left"></div></code>
    </div>
    <div class="code code--small code--left" aos="zoom-in-right">
      <code><div aos="zoom-in-right"></div></code>
    </div>
    <div class="code code--small code--right" aos="zoom-out">
      <code><div aos="zoom-out"></div></code>
    </div>
    <div class="code code--small code--left" aos="zoom-out-up">
      <code><div aos="zoom-out-up"></div></code>
    </div>
    <div class="code code--small code--right" aos="zoom-out-down">
      <code><div aos="zoom-out-down"></div></code>
    </div>
    <div class="code code--small code--left" aos="zoom-out-right">
      <code><div aos="zoom-out-right"></div></code>
    </div>
    <div class="code code--small code--right" aos="zoom-out-left">
      <code><div aos="zoom-out-left"></div></code>
    </div>
  </div>
</section>
<section class="section section--code">
  <div class="container">
    <h2 class="section-title">Different settings examples</h2>
    <div class="code code--left" aos="fade-up" aos-duration="3000">
      <code><div aos="fade-up"
     aos-duration="3000">
</div></code>
    </div>
    <div class="code code--right" aos="fade-down" aos-easing="linear" aos-duration="1500">
      <code><div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500">
</div></code>
    </div>
    <div id="example-anchor" class="code code--left" aos="fade-right" aos-offset="300" aos-easing="ease-in-sine">
      <code><div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine">
</div></code>
    </div>
    <div class="code code--right" aos="fade-left" aos-anchor="#example-anchor" aos-offset="500" aos-duration="500">
      <code><div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500">
</div></code>
    </div>
    <div class="code code--left" aos="fade-zoom-in" aos-easing="ease-in-back" aos-delay="300" aos-offset="0">
      <code><div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0">
</div></code>
    </div>
    <div class="code code--right" aos="flip-left" aos-easing="ease-out-cubic" aos-duration="2000">
      <code><div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000">
</div></code>
    </div>
  </div>
</section>
<section class="section section--code">
  <div class="container">
    <h2 class="section-title">Anchor placement</h2>
    <div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="top-bottom">
      <code><div aos="fade-up"
     aos-anchor-placement="top-bottom">
</div></code>
    </div>
    <div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="center-bottom">
      <code><div aos="fade-up"
     aos-anchor-placement="center-bottom">
</div></code>
    </div>
    <div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="bottom-bottom">
      <code><div aos="fade-up"
     aos-anchor-placement="bottom-bottom">
</div></code>
    </div>
    <div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="top-center">
      <code><div aos="fade-up"
     aos-anchor-placement="top-center">
</div></code>
    </div>
    <div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="center-center">
      <code><div aos="fade-up"
     aos-anchor-placement="center-center">
</div></code>
    </div>
    <div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="bottom-center">
      <code><div aos="fade-up"
     aos-anchor-placement="bottom-center">
</div></code>
    </div>
  </div>
</section>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script src="js/highlight.min.js"></script> 
<script src="dist/aos.js"></script> 
<script>
	AOS.init({
		easing: 'ease-out-back',
		duration: 1000
	});
</script> 
<script>
	hljs.initHighlightingOnLoad();

	$('.hero__scroll').on('click', function(e) {
		$('html, body').animate({
			scrollTop: $(window).height()
		}, 1200);
	});
</script>


</body>
</html>

Run code

Cut to clipboard

有过 5 条评论 »

广西南宁市 2017-03-21, 17:27:37

		<? 
			$fade_arr=array('fade-up','fade-down','fade-left','fade-right','fade-up-right','fade-up-left','fade-down-right','fade-down-left','flip-up','flip-down','flip-left','flip-right','slide-up','slide-down','slide-left','slide-right','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');
			$ease_arr=array('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');

			
		foreach($commentdb as $comment){
			$thisbg = isset($thisbg) && $thisbg == 'content' ? 'content2' : 'content';
				$fade_arr_rand_keys = array_rand ($fade_arr, 1); 
				$fade_arr_css=$fade_arr[$fade_arr_rand_keys];
				
				$ease_arr_rand_keys = array_rand ($ease_arr, 1); 
				$ease_arr_css=$ease_arr[$ease_arr_rand_keys];
				
				$duration_arr_css=rand(500,1500);
		?>
		<div class="comment-box <?=$thisbg?>" aos="<?=$fade_arr_css?>" aos-easing="<?=$ease_arr_css?>" aos-duration="<?=$duration_arr_css?>">

reply | quote | #¹

广西南宁市 2017-03-21, 17:28:14

<link rel="stylesheet" href="/tmp/aos.css" />
<script src="/tmp/aos.js"></script> 
<script>
	AOS.init({
		easing: 'ease-out-back',
		once:true,
		duration: 1000
	});

reply | quote | #²

广西南宁市 2017-03-22, 09:45:41

总觉得有点惋惜就算是多么不爽的人突然消失了怎么也会心里咯噔一下的

reply | quote | #³

广西南宁市 2017-03-22, 10:04:46

如果你的月薪仅3000元，想买一套140平的房子和40万的奥迪A6，那么你不妨给自己定个小目标，比如说我先活他个250年，然后向天再借五百年。

reply | quote | #⁴

广西南宁市 2017-12-23, 17:46:13

Css鼠标滚动图标

<style>body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #111;
}

.scroll-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2em;
  width: 1.2em;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 2em;
  border: solid 2px;
  -webkit-transition: .4s;
  transition: .4s;
}

.scroll-icon:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.scroll-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
  -webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}

@keyframes scroll-icon {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}
</style><a href="#" class="scroll-icon"></a>

#,广西南宁市,2017-12-23,17:48:14,
mousewheel滚轮事件鼠标滚轮事件滚动监听鼠标滚轮滚动事件绑定鼠标滚轮
原生的滚轮事件：火狐与其他浏览器使用了不同的事件

/* 
 * 滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;
 * 
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) {

    var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
    console.log(direction);    
});

// chrome and ie
document.body.onmousewheel = function (event) {
    event = event || window.event;

    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
    console.log(direction);
};

使用jquery兼容后的事件

// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) {
    
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

    
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

#,广西南宁市,2017-12-23,17:52:18, jq滚轮事件

reply | quote | #⁵

Records:5 1/1 «‹1 ›»

lizhenqiu blog

AOS.js页面滚动元素动画jQuery动画库

相关日志

有过 5 条评论 »

留下評論