製做單頁網站須要用到插件介紹

製做單頁網站常常會碰到一些效果，在這就說說比較廣泛的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使用文檔。