制做单页网站须要用到插件介绍

制做单页网站常常会碰到一些效果，在这就说说比较广泛的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使用文档。