前端資源彙總

前端收藏夾：http://collect.w3ctrain.com/

JavaScript

框架/庫

Animations

• velocity：很全面的JavaScript動畫庫

• vivus：能夠動態描繪 SVG 的 JS 庫, 支持多種動畫

• Web Animation：Javascript 實現的 Web Animation API

• scrollReveal.js：使元素以很是酷帥的方式進入畫布 (Viewpoint)

• snabbt.js：一個利用 Javascript 和 CSS transform 的 animation 庫

• transit：jquery實現的css動畫

• matter-js：2D 物理效果引擎，碰撞、彈跳等

• parallax：一個用於響應智能手機 orientation 的庫

• focusable：是頁面上一個元素高亮的庫，關燈效果

• sensor.js：在智能移動設備瀏覽器上，經過HTML5的api使用移動設備的功能。定位、運動、傾斜等

• animatable：僅僅依靠 border-width 和 background-position 實現的各類動態效果

• Bounce.js：漂亮的css3動畫庫

• GreenSock：基於svg，很強大的動畫效果，High-performance HTML5 animations that work in all major browsers.

• dynamics.js：彈性物理效果

Slider

• slick：功能異常強大的一個圖片滑動切換效果庫

• swipe：很是輕量級的一個圖片滑動切換效果庫, 性能良好, 尤爲是對手機的支持, 壓縮後的大小約 5kb

• swiper：用於實現瀏覽器上的滑動切換效果，支持硬件加速

• Owl：多種圖片輪播效果，多選項的

• flickity：輪播圖效果，左右有顯示一半的圖片

• icheck：一款漂亮的 Checkbox 插件

• iscroll：高性能的滾動(scroll)處理庫，功能強大，支持各類事件，不依賴任何的庫，且插件豐富, 大衆點評的手機端列表滾動就是用這個庫處理的

• Slideout.js ：一個很是美觀的側滑菜單

Others

• sweetalert：一個很是美觀的用於替換瀏覽器默認 alert 的庫

• Sortable：現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery

• echarts：百度圖表

• metrics-graphics：基於 D3 的圖表庫，簡潔、高效，Mozilla 出品

• c3：基於 D3 的圖表庫

• Summernote：WYSIWYG 富文本編輯器

• awesomplete：很是輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀。

• basket.js：基於 LocalStorage 的資源加載器，能夠用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存

• mobile-angular-ui：基於angularjs和bootstarp的web app開發框架

• moment.js：輕量級的Javascript日期處理類庫

• Datatables：jquery表格插件，它是一個高度靈活的工具，能夠將任何HTML表格添加高級的交互功能。

• artDialog：經典的網頁對話框組件

• sliphover：不一樣方向的hover動畫，

js插件

• jQuery全屏滾動插件fullPage.js演示

• 另外一款實現一步滾動的開源庫，使用人數衆多，可實現各類狂拽酷炫掉渣天的前端效果

• jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果

• 頁面上內嵌圖片的放大縮小效果，相似於 Medium 中的效果

• jQuery 倒計時插件

• Spectrum：Js實現的顏色選擇器 (Colorpicker)

• 簡潔美觀的進度條，扁平化

• 功能強大的圖片延遲加載工具，能夠首先加載一個低質量的圖片，而後再加載高質量的圖片

• jQuery 的一個插件，能夠用來實現瀑布流的效果

• jQuery 插件，用來生成二維碼

• 一個能夠檢測設備類型的工具，能夠讓咱們根據不一樣的設備來爲其定製響應的 Javascript 和 CSS

• 滾動加載，滾動到最下到自動加載， Paul Irish 大神之做

• 單頁應用中一個用於處理導航欄的庫

• 多種輪播圖上下切換按鈕效果

• jQuery 插件，用於綁定熱鍵

css

框架/庫

• normalize.css：一個用於重置瀏覽器內置樣式的庫

• type.css：中文網頁重設與排版：一致化瀏覽器排版效果，構建最適合中文閱讀的網頁排版

• 網易nec：更好的css樣式解決方案

• Pure：雅虎出品樣式框架，恩，能夠閱讀參考

• Flat UI：Bootstrap 的一款主題，簡潔美觀

• foundation：另外一款前端模版框架，相似於 Bootstrap

• Animate.css：css動畫效果

• movejs：基於 CSS3 的前端動畫框架

• Hover.css：基於 CSS3 的各類 鼠標懸停(hover)特效

• css3 generator：css3新特新介紹

css3特效

• singlediv：僅用一個div就畫出圖標

• icono：一款用純 CSS3 實現的圖標庫

• css3lib：CSS3 UI 庫，騰訊團隊出品，多種css3特效庫

• 最強9種css3圓形按鈕hover鼠標通過動畫效果

• 多種按鈕懸停效果

• load-awesome：很棒的一套loading效果

網站

工具類

用於前端優化的一些檢測工具

• caniuse：查看html5和css3瀏覽器的支持狀況

• html5test：測試瀏覽器對html5的支持狀況

• css3test：測試瀏覽器對css3的支持狀況

• libscore：統計網站和js使用排行

• 開源中國在線工具

• 在線工具，作最專業的工具網站

• 阿里測：網站性能測試分析

• PageSpeed：谷歌家的網頁性能工具

• iTest：iTest愛測試前端測試服務，多瀏覽器測試

• 微信調試工具

• 百度字體編輯器

設計類

輔助是設計

• Awwwards：一家篩選評比互聯網上最佳網站設計開發的網站

大公司前端團隊官網

• alloyteam：騰訊全端 AlloyTeam 團隊 Blog

學習資源彙總類

• awesome：awesome 彙總，github上超全面資源集合

• awesome-resources

• 免費的編程中文書籍索引：Github上面的免費的計算機編程類中文書籍

• 谷歌的前端性能優化文章列表

前端

兼容性

• Placeholders.js：爲不支持的 HTML5 的瀏覽器提供 Placeholder 支持

模板

好看的網站模板，能夠參考。

• 相片或做品展現的一個模板，簡單好看

• 免費的html5響應式模板

• html5簡潔的模板

• bootstrap響應式模板，有好多款

• 黑白簡潔的響應式模板

移動端

框架

• amazeui：中國首個開源 HTML5 跨屏前端框架

後端

nodejs

• nodeschool：基於 Node.js 打造的、跑在終端上的開源教學課程。

• node-lessons：Node.js 包教不包會

  
  
  來源： http://www.javashuo.com/article/p-qrbctcnu-h.html

來自爲知筆記(Wiz)