前端知识小库

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

2. Animate.css框架：
   官网演示：https://daneden.github.io/animate.css/
   框架下载：官网：https://daneden.github.io/animate.css/
   github: https://github.com/daneden/animate.css

    简单介绍：Animate.css是一个css动画样式库。浏览器兼容，
             animate.css底层是通过css3实现的，当然是只兼容支持CSS3 
   
   animate属性的浏览器： IE10+、Firefox、Chrome、Opera、Safari。
   
   animated: 动画公共的样式
   

3.WOW框架
官网：http://mynameismatthieu.com/WOW/
github: https://github.com/matthieua/WOW

简单介绍：通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。
         轻量级类库， 不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。
         容易定制。WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

         wow: 动画公共的样式
         JavaScript中进行初始化:new WOW( ).init( );

data-x-offset图解：

23.png

4. scrollReveal框架
   官网：https://scrollrevealjs.org/
   github: https://github.com/jlmakes/scrollreveal

    简单介绍：scrollReveal是一个兼容PC端和移动设备的滚动-动画库。
   
             也是在页面逐渐向下滚动的过程中逐渐释放这些动画效果 ，
   
    与WOW.js 不同的是 :   
   
             WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以配置播放一次或无限次;
   
            0依赖（不依赖于jQuery，也不依赖于animate.css）;
   
            定制性高，使用简单方便快捷。
   
            但是它的动画也是用CSS3创建的，所以依然需要支持HTML5和CSS3比较好的浏览器，
   
            比如： IE10+、Firefox、Chrome、Opera、Safari。
   

   用法：拿到ScrollReveal对象：window.sr = ScrollReveal( );
   开始动画：sr.reveal(".box",config);

5. scrollReveal 和 WOW的区别和联系

      - 它们都不依赖jQuery；
   
      - wow依赖于animate.css ，ScrollReveal不依赖任何其他插件或者库；
   
      - wow的释放动画，只能够实现一次，而ScrollReveal可以无限次使用；
   
      - ScrollReveal 参数相对比较多，比较复杂些；
   
      - 实际工作中，用wow比较多。
   
   

6.Bootstrap框架

官网 ： http://www.bootcss.com/
github：https://github.com/twbs/bootstrap

 简单介绍：bootstrap是当下最流行的前端框架（界面工具集);

          目的在于让web开发更加迅速、敏捷；

          响应式界面，移动设备优先；

          Boostrap 依赖 Jquery

 什么是框架：库 lib library ；

            写的更少做的更多 提供一套较为便捷的操作方式；

            将一套功能体系封装到一个单独的文件中的东西；

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

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

8. 关于字体图标的网站
   醉牛前端：http://f2er.club/
   阿里巴巴图标库：http://www.iconfont.cn/
   制作字体图标网站：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: 在水平方向滚动的增量，默认是 0
  
  - deltaY: 在垂直方向滚动的增量;      增量正数向上滚动，增量负数 向下滚动
  
  - deltaFactor: 滚动的帧率，默认是100
  

• 简介

  - 滚滚屏网站是时下非常流行的个人站或者企业站的制作风格，
  
    这个本身就是一种流行的趋势，这个类型的网站大量运用css3中的动画模块技术，并且需要配合使用jquery。
  

• 特点：

  - 每一屏都是铺满的 宽度和高度都是100%；
  
  - 没有滚动条；
  
  - 滚动效果需要第三方库的支持；
  
  - 每一屏的元素都是定位实现的；一般都是居中定位，这个很重要;
  
  - 所有的入场动画和出场动画都是依靠CSS3 实现的。
  

10. Less语言
    LESS中文网 : 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中文网
    http://www.gulpjs.com.cn/

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

16. 关于前端的优秀网站
    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. 存储关于node.js第三方包的地址
    https://www.npmjs.com/