页面滚动动画库，快看看

本文属xxKarina原创，转载请注明
个人博客地址：https://xxkarina.github.io/

前端涉及的领域真的很广，但是粗略的划分的话，其实就是简单的三要素：html、css、js，当然，这些基本的Web前端技术是远远不足以让你成为一名优秀的工程师的

要做的更好的话，你需要在掌握这些技术的同时还需要熟悉他们在不同浏览器的兼容情况以及渲染原理和存在的bug，在你的知识结构中，应该是包含网络性能优化，SEO，服务端的基本知识以及一些流行的前端开发框架，发展趋势等，实现代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持

文章要点：

• 页面滚动动画库基础知识
• 页面滚动动画库有什么怎么用

页面滚动动画库基础知识

上面提及的技术都是基于你的前端的基础之上的，也就是说，你最基本的就是要会开发一个用户体验好的网页，往往网页中是少不了基础的动画的，但是我们去实现动画的话，会存在，成本高，实现效果不佳的问题，于是这个时候就有必要使用到一些 动画库了，这些动画库基本能够与满足我们的需求，那今天，我们就来看看几个常用的页面滚动动画库

动画其实有很多种制作手法，腾讯ISUX团队的一篇博客就做了就简单的总结《H5动效的常见制作手法》，里面分别简单的介绍了8中动效制作手法

分别有：GIF（细节），逐帧动画（较复杂）、SVG（线条）、Canvas、Flash->Canvas（绘图）、Video（视频）、Javascript（辅助）、CSS3（平面）

关于css3和JavaScript的制作手法真的是值得一提的
使用css3制作动画的时候要熟悉其三大属性的使用：
Transform 变形，Transition 过渡，和Animation 动画

Transform变形需要掌握五大特性：

• rotate 旋转 transform: rotate(45deg);
• skew 扭曲 transform: skew(45deg);
• scale 缩放 transform: scale(1, 0.5);
• translate 移动 transform: translate(10px, 20px);
• matrix 矩阵变形 transform: matrix(a, c, b, d, 水平偏移距离, 垂直偏移距离);
  至于前面的abcd的话就是矩阵的元素值
  abcd表示的矩阵

以上提及的变形五大特性其实本质上都是基于matrix()方法实现的，虽然整合起来会方便很多，但是也会存在理解上的困难，需要花上一定的时候去进行计算，但是，理解transform中matrix()矩阵方法有利于透彻理解CSS3的transform属性，所以想了解的童鞋赶紧啦。

Transition 过渡的特点在于其平滑性：

• transition-property: 指定过渡的属性值，比如transition-property:opacity就是只指定opacity属性参与这个过渡。
• transition-duration: 指定这个过渡的持续时间
• transition-delay: 延迟过渡时间
• transition-timing-function: 指定过渡动画缓动类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

Animation动画主要是有六大属性：

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name：选择器的 keyframe 名称
这个要怎么理解呢，我们来看一个小 demo，获取有助于你理解

<style>
.box
{
width:100px;
height:100px;
background:red;
position:relative;
/* 下面就是可以设置keyframe名称啦 */
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
/* 然后你就可以根据你设置的相应的keyframe名称去实现你想要的效果 */
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
<div class="box></div>

animation-duration：完成动画所花费的时间（毫秒）
animation-timing-function：动画的速度曲线
animation-delay：动画开始之前的延迟
animation-iteration-count：动画应该播放的次数
animation-direction：是否应该轮流反向播放动画

页面滚动动画库是有什么怎么用？

• 动画库一：animate.css
  说到动画，大家脑海估计都会出现 animate.css，是的，animate.css是一个有趣的，跨浏览器的css3动画库，很值得我们在项目中使用

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
注意：只有数字值可创建动画

它有四个主要的属性可供使用：
styles（css样式值）、speed（动画速度：具体毫秒数、normal、slow、fast）、easing（swing、linear）、callback（回掉函数）

使用步骤：

• 引入animate css文件 <link rel="stylesheet" href="animate.min.css">
• 给指定的元素加上指定的动画样式的类名 <div class="animated bounceOutLeft"></div>
• 使用jq配合操作 addClass()：使用jq配合操作的一个好处就是，可以控制它，比如要实现一个简单的淡入淡出，就可以配合setTimeout来实现啦

• 动画库二：wow.js

前面提及的animate确实是很不错的一个库，但是有时候我们需要根据我们自己的产品去调整里面的一下动画效果的话，恐怕就不是那么理想了，于是，在这个时候我们就可以使用wow.js这个动画库改变动画设置风格、延迟、长度、偏移和迭代等，通过wow，可以在页面滚动的过程中逐渐释放这些动画效果。

wow具备以下优点：

• 轻量级
• 使用简单

使用步骤：

• 引入文件 <script src="wow.js"></script>
• 给指定的元素加上指定的动画样式的类名<div class="wow slideInLeft"></div>
• 还可以加上一些需要的动画效果 data-wow-duration="2s"
• 初始化（全局配置） new WOW().init();

• 动画库三：aos.js

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

使用步骤：

• 引入样式文件 <link rel="stylesheet" href="aos.css" />
• 引入js文件 <script src="aos.js"></script>
• 添加属性 <div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600">
• 初始化（全局配置）AOS.init()
• 禁用AOS AOS.init({ disable: 'mobile' }) （可选参数：mobile、phone或tablet）

aos 有各种动画效果，可以粗略的分为六大类

• 淡入淡出动画（fade）
• 翻转动画（flip）
• 滑动动画（slide）
• 缩放动画（zoom）
• 锚位置（top-bottom）
• easing动画（ease、linear）

• 动画库四：pagePiling.js

全屏滚动效果在网页开发中的时候也是很常见的，是最近非常流行的网页设计形式，这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果。支持所有的主流浏览器，包括IE8+，支持移动设备

使用步骤：

• 引入样式文件 <link rel="stylesheet" href="pagepiling.css" />
• 引入js文件 <link rel="stylesheet" href="pagepiling.js" />

//代码示例
<div id="pagePiling">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script>
$(function(){
  $('#pagePiling').pagepiling({
    sectionsColor: ['#00d8cc', '#00c13f', '#ff7d23', '#ff1d77'],
    anchors: ['page1', 'page2', 'page3', 'page4']
  });
});

</script>

• 动画库五：Parallax.js

Parallax.js是javascript视觉差特效引擎插件。可以制作出非常炫酷的视觉差特效，检测智能设备的方向

小demo：

<script src='./js/justParallax.js' type='text/javascript'><script>
<script>
  //默认设置
  speed: 8; // 滚动背景的速度，1比10快
  vertical: true; //如果背景垂直滚动，则设置为true
  vertical_inversed: false; // 如果垂直方向应该颠倒，则设置为true
  horizontal: true; // 如果背景水平滚动，则设置为true
  horizontal_inversed: false; // 如果水平方向应该颠倒，则设置为true
  //使用justParallax.js的一个例子
  var settings = {
    speed: 5,
    vertical: true,
    vertical_inversed: true,
    horizontal: true,
    horizontal_inversed: false
  };
  initParallax(settings);
</script>

掌握了上面这些，你就可以很轻松的去实现一些简单的网页啦
加油！