1. 醉牛前端 , 收集前端常用的工具集合：
   http://f2er.club/

2. Animate.css框架：
   官網(wǎng)演示：https://daneden.github.io/animate.css/
   框架下載：官網(wǎng)：https://daneden.github.io/animate.css/
   github: https://github.com/daneden/animate.css

    簡單介紹：Animate.css是一個css動畫樣式庫。瀏覽器兼容，
             animate.css底層是通過css3實現(xiàn)的，當(dāng)然是只兼容支持CSS3 
   
   animate屬性的瀏覽器： IE10+、Firefox、Chrome、Opera、Safari。
   
   animated: 動畫公共的樣式
   

3.WOW框架
官網(wǎng)：http://mynameismatthieu.com/WOW/
github: https://github.com/matthieua/WOW

簡單介紹：通過WOW.js，可以在頁面逐漸向下滾動的過程中逐漸釋放這些動畫效果。
         輕量級類庫， 不依賴jQuery，超簡單的安裝和使用，與animate.css配合，只需要短短幾行代碼就可以實現(xiàn)很多特效。
         容易定制。WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox、Chrome、Opera、Safari。

         wow: 動畫公共的樣式
         JavaScript中進行初始化:new WOW( ).init( );

data-x-offset圖解：

23.png

4. scrollReveal框架
   官網(wǎng)：https://scrollrevealjs.org/
   github: https://github.com/jlmakes/scrollreveal

    簡單介紹：scrollReveal是一個兼容PC端和移動設(shè)備的滾動-動畫庫。
   
             也是在頁面逐漸向下滾動的過程中逐漸釋放這些動畫效果 ，
   
    與WOW.js 不同的是 :   
   
             WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以配置播放一次或無限次;
   
            0依賴（不依賴于jQuery，也不依賴于animate.css）;
   
            定制性高，使用簡單方便快捷。
   
            但是它的動畫也是用CSS3創(chuàng)建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，
   
            比如： IE10+、Firefox、Chrome、Opera、Safari。
   

   用法：拿到ScrollReveal對象：window.sr = ScrollReveal( );
   開始動畫：sr.reveal(".box",config);

5. scrollReveal 和 WOW的區(qū)別和聯(lián)系

      - 它們都不依賴jQuery；
   
      - wow依賴于animate.css ，ScrollReveal不依賴任何其他插件或者庫；
   
      - wow的釋放動畫，只能夠?qū)崿F(xiàn)一次，而ScrollReveal可以無限次使用；
   
      - ScrollReveal 參數(shù)相對比較多，比較復(fù)雜些；
   
      - 實際工作中，用wow比較多。
   
   

6.Bootstrap框架

官網(wǎng) ： http://www.bootcss.com/
github：https://github.com/twbs/bootstrap

 簡單介紹：bootstrap是當(dāng)下最流行的前端框架（界面工具集);

          目的在于讓web開發(fā)更加迅速、敏捷；

          響應(yīng)式界面，移動設(shè)備優(yōu)先；

          Boostrap 依賴 Jquery

 什么是框架：庫 lib library ；

            寫的更少做的更多 提供一套較為便捷的操作方式；

            將一套功能體系封裝到一個單獨的文件中的東西；

             Bootstrap提供一套前端需要的界面工具集合。

7. 前端庫：https://www.awesomes.cn/repos/Applications

8. 關(guān)于字體圖標(biāo)的網(wǎng)站
   醉牛前端：http://f2er.club/
   阿里巴巴圖標(biāo)庫：http://www.iconfont.cn/
   制作字體圖標(biāo)網(wǎng)站：https://icomoon.io/

9. 滾滾屏插件MouseWheel
   github: https://github.com/jquery/jquery-mousewheel

• 用法：

  // using on
  $('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
  });
  
  // using the event helper
  $('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
    });
  
  - deltaX: 在水平方向滾動的增量，默認(rèn)是 0
  
  - deltaY: 在垂直方向滾動的增量;      增量正數(shù)向上滾動，增量負(fù)數(shù) 向下滾動
  
  - deltaFactor: 滾動的幀率，默認(rèn)是100
  

• 簡介

  - 滾滾屏網(wǎng)站是時下非常流行的個人站或者企業(yè)站的制作風(fēng)格，
  
    這個本身就是一種流行的趨勢，這個類型的網(wǎng)站大量運用css3中的動畫模塊技術(shù)，并且需要配合使用jquery。
  

• 特點：

  - 每一屏都是鋪滿的 寬度和高度都是100%；
  
  - 沒有滾動條；
  
  - 滾動效果需要第三方庫的支持；
  
  - 每一屏的元素都是定位實現(xiàn)的；一般都是居中定位，這個很重要;
  
  - 所有的入場動畫和出場動畫都是依靠CSS3 實現(xiàn)的。
  

10. Less語言
    LESS中文網(wǎng) : http://www.lesscss.cn/
    github : https://github.com/less/less.js

11. zepto
    英文版：http://zeptojs.com//
    中文版：http://www.css88.com//doc//zeptojs_api//
    github : https://github.com/madrobby/zepto

12. node.js
    https://nodejs.org

13. 前端框架主流方向
    https://www.awesomes.cn/rank?sort=hot

14. gulp中文網(wǎng)
    http://www.gulpjs.com.cn/

15. jQuery之家
    http://www.htmleaf.com/

16. 關(guān)于前端的優(yōu)秀網(wǎng)站
    http://www.htmleaf.com/
    http://www.qdfuns.com/
    http://www.runoob.com/
    http://resource.haorooms.com/
    http://www.yyyweb.com/
    http://www.alloyteam.com/nav/
    https://news.awesomes.cn/
    http://www.daqianduan.com/nav
    http://fex.baidu.com/
    http://www.alloyteam.com/
    http://1nami.com/site/170.html

17. 存儲關(guān)于node.js第三方包的地址
    https://www.npmjs.com/