制作单页网站需要用到插件介绍

制作单页网站经常会碰到一些效果，在这就说说比较普遍的2个插件是如何辅助我们完成制作的:)

1. stellar 视差插件
   视差效果已经流行了一段时间，尽管有许多这类的插件，但是这款插件可以帮你解决尽量多的问题。
   stellar.js使用非常简单，设定之后，该对象中的所有背景或元素都会应用视差滚动效果：

   // 例如：
   $(window).stellar();
   // 或者：
   $('#main').stellar();
   

   当然还要设定哪些元素（或元素的背景）滚动时的快慢效果，可以在元素加上

   <div data-stellar-ratio="2"><!--元素滚动设置-->
   <div data-stellar-background-ratio="0.5"><!--元素背景滚动设置-->
   

   stellar-ratio和stellar-background-ratio的值都是滚动速度相对的倍率，像上面设定为0.5元素滚动速度为原速度的一半，设定为1就等同和原滚动速度一样（其实这样是看不出效果，等于没效果www）。

   当元素滚动的比例值小于1时，可能会出现滚动不连贯的跳动现象，这时请将相应元素的 'position' 设置为 fixed 。
   背景滚动也可能出现滚动不连续跳动现象，所以背景滚动的元素 'background-attachment' 要设置为 fixed。

   我理解的就这么多，详细使用参考stellar.js中文文档，建议直接看例子好理解多了！

2. jQuery Waypoints 控制显示动画
   jQuery Waypoints是个可以让你页面滚动到指定元素后触发响应的好东西，例如当页面中的<div class="test"></div>元素滚动到屏幕顶端时要使其元素内的文字变色：

   $(".test").waypoint(function() {
     $(this).addClass('text-red');
   });
   

   如果想页面滚动到最后才响应，参考下面代码：

   //滚动至最后的操作
   $('#footer .scrollimation').waypoint(function(){
       ...
   },{
       'offset': 'bottom-in-view'
   });
   

   offset的作用就类似于元素至屏幕最上方位置的设定，当是数值时页面滚动到屏幕与元素相距的距离值时才响应。
   有了这个插件可以让我们轻松控制好页面滚动到能看到的位置才展示动画。如何使用可以查看jQuery Waypoints使用文档。