Stellar插件
视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充
特性；
视差滚动效果酷炫，适合于个性展示的场合。
视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
视差滚动容易迷航，需要具备较强的导航功能。
原理：
传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。有的时候也可以加上一透明度、大小的动画来优化显示。利用background-attachment属性实现。
使用步骤：
引入插件库
在结构中添加data-stellar-background-ratio=0.5 在样式中添加 background-attachment: fixed;
标签种类<header>：定义页眉
<nav>：定义导航
<section>：定义文档中的区段
<time>：定义日期和时间
<article>：定义文章
<aside>：定义文章的侧边栏
<figure>：定义一组媒体对象以及文字
<figcaption>：定义figure的标题
<footer>：定义页脚
标签作用
header与footer标签用于表示页面、应用或某个模块的头部和尾部；
nav用于表示导航
article标签表示文章；
aside签和article标签用法类似，只是表示内容会出现在侧边栏；
figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）
jquery操作类的方法
Addclass() removeclass() toggleclass() hasclass()
窗体顶端
如何获取自定义属性的值data
<body>
<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>
<script>
var tree = document.getElementById("tree");
//getAttribute()取值属性
console.log(tree.getAttribute("data-leaves"));
console.log(tree.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tree.setAttribute("data-leaves","48");
//data-前缀属性可以在JS中通过dataset取值，更加方便
console.log(tree.dataset.leaves);
console.log(tree.dataset.plantHeight);
//赋值
tree.dataset.plantHeight = "3m";
tree.dataset.leaves--;
//新增data属性
tree.dataset.age = "100";
//删除，设置成null，或者delete
tree.dataset.leaves = null;
delete tree.dataset.age;
//jQuery的data方法
var $tree = $('#tree');
