在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。

或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。

由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来 Enjoy 吧！

---

JavaScript 库

• Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库；

地址：

http://vincentgarreau.com/particles.js/

• Three.js  - 用于在网页上创建 3D 物体与空间的 JS 库；

地址：https://threejs.org/

• Fullpage.js - 易于实现全屏滚动功能的库；

地址：

https://alvarotrigo.com/fullPage/#firstPage

• Typed.js - 实现打字机效果；

地址：

http://www.mattboldt.com/demos/typed-js/

• Waypoints.js - 滚动到元素触发事件的库；

地址：

http://imakewebthings.com/waypoints/

• Highlight.js - 页面上语法高亮显示；

地址：https://highlightjs.org/

• Chart.js - 纯 JS 制作漂亮的图表；

地址：http://www.chartjs.org/

• Instantclick - 鼠标悬停预先加载页面资源，大大加速你的网站响应速度；

地址：http://instantclick.io/

• Chartist - 开源响应式图表库；

地址：

http://gionkunz.github.io/chartist-js/index.html

• Motio - 基于 sprite 的动画和平移库；

地址：

http://darsa.in/motio/#!introduction

• Animstion - 页面切换动画的 jQuery 插件；

地址：http://git.blivesta.com/animsition/

• Barba.js - 创建页面间流畅平滑的过渡效果；

地址：https://github.com/luruke/barba.js

• TwentyTwenty - jQuery 视差插件；

地址：

http://zurb.com/playground/twentytwenty

• Vivus.js - 可以执行 SVG 路径动画的轻量级 JS 库；

地址：

https://github.com/maxwellito/vivus#vivusjs

• Wow.js - 页面滚动时展现动画效果；

地址：

http://mynameismatthieu.com/WOW/

• Scrolline.js - 页面滚动时显示滚动进度的 jQuery 插件；

地址：

https://github.com/anthonyly/Scrolline.js

• Velocity.js - 用于加速 JavaScript 动画；

地址：http://velocityjs.org/

• Animate on scroll - 页面滚动时增添元素动画的小型库；

地址：http://michalsnik.github.io/aos/

• Handlebars.js - JavaScript 模板引擎；

地址：http://handlebarsjs.com/

• jInvertScroll - 轻量级的 jQuery 水平视差插件；

地址：

http://www.pixxelfactory.net/jInvertScroll/

• One page scroll - 实现苹果风格单页滚动效果的 jQuery 插件；

地址：

https://github.com/peachananr/onepage-scroll

• Parallax.js - 轻量级的视差引擎，能够对智能设备的方向作出反应；

地址：

https://github.com/wagerfield/parallax

• Typeahead.js - 搜索框自动补全的 JS 库；

地址：

http://twitter.github.io/typeahead.js/

• Dragdealer.js - 基于拖动的 JavaScript 组件；

地址：

http://skidding.github.io/dragdealer/

• Bounce.js - 快速创建漂亮的 CSS3 动画效果；

地址：http://bouncejs.com/

• Pagepiling.js - 创建全屏滚动效果；

地址：

https://github.com/alvarotrigo/pagePiling.js

• Multiscroll.js - 创建两列垂直反向滚动效果的 jQuery 插件；

地址：

http://aerolab.github.io/midnight.js/

• Favico.js - 动态图标插件；

地址：http://lab.ejci.net/favico.js/

• Midnight.js - 固定头部切换效果；

地址：

http://aerolab.github.io/midnight.js/

• Anime.js - JavaScript 动画引擎；

地址：http://animejs.com/

• Keycode - 获取键盘按键的 JS 键码值；

地址：http://keycode.info/

• Sortable - 用于拖拽排序的 JavaScript 库；

地址：http://rubaxa.github.io/Sortable/

• Flexdatalist - 支持<datalist>的 jQuery 自动完成插件；

地址：

http://projects.sergiodinislopes.pt/flexdatalist/

• Slideout.js - 实现滑出式 Web App 导航菜单；

地址：https://slideout.js.org/

• Jquerymy - 实时、复杂的双向数据绑定 jQuery 插件；

地址：http://jquerymy.com/#/

• Cleave.js - 自动格式化表单输入框的文本内容；

地址：http://nosir.github.io/cleave.js/

• Page - 构建单页应用的小型客户端路由库；

地址：

http://smalljs.org/client-side-routing/page/

• Selectize.js - 基于 jQuery 的<select> UI 控件，用于创建tag标签输入框和 select 下拉框；

地址：

http://selectize.github.io/selectize.js/

• Nice select - 创建漂亮下拉框的 jQuery 插件；

地址：

http://hernansartorio.com/jquery-nice-select/

• Tether - 使用绝对定位创建两个互相相关元素的 JS 库；

地址：http://tether.io/

• Shepherd.js - 创建新手引导的 JS 库；

地址：

https://github.com/HubSpot/shepherd

• Tooltip - 工具提示插件；

地址：https://github.com/HubSpot/tooltip

• Select2 - 基于 jQuery 的替代选择框；

地址：https://select2.github.io/

• IziToast - 轻量的跨浏览器响应式消息通知插件；

地址：http://izitoast.marcelodolce.com/

• IziModal - 炫酷的 jQuery 模态窗口插件。

地址：http://izimodal.marcelodolce.com/

---

CSS 库与设计资源

• Animate.css  - 强大的 CSS3 动画库；

地址：

https://daneden.github.io/animate.css/

• Flat UI Colors - 漂亮的扁平化配色；

地址：https://flatuicolors.com/

• Material Design Lite - 基于谷歌 Material Design 的前端框架；

地址：https://getmdl.io/index.html

• Colorrrs  - 随机颜色生成器；

地址：

https://www.webpagefx.com/web-design/random-color-picker/

• Section separators - CSS 区域分割；

地址：

https://tympanus.net/Development/SectionSeparators/

• Topcoat - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具；

地址：http://topcoat.io/

• Create Ken Burns Effect - 利用 CSS3 实现的 Ken burns 特效；

地址：

https://www.kirupa.com/html5/ken_burns_effect_css.htm

• DynCSS - 用于分析 CSS -dyn-属性规则，并使其具备动态属性；

地址：

http://www.vittoriozaccaria.net/dyn-css/

• Magic animations - 具备特殊动效的 CSS3 动画；

地址：

https://www.minimamente.com/example/magic_animations/

• CSSpin - 丰富的 CSS 加载动画；

地址：https://webkul.github.io/csspin/

• Feather icons - 简单、漂亮的开源图标库；

地址：https://feathericons.com/

• Ion icons - 专为 Ionic 框架设计的图标字体；

地址：http://ionicons.com/

• Font Awesome - 可缩放的矢量图标字库；

地址：http://fontawesome.io/

• Font Generator - 在线字体生成器；

地址：http://brandmark.io/font-generator/

• On/Off FlipSwitch - 在线创建纯 CSS3 动画开关效果；

地址：https://proto.io/freebies/onoff/

• UIkit - 轻量级的模块化前端框架；

地址：https://getuikit.com/

• Bootstrap - 著名的前端框架；

地址：http://getbootstrap.com/

• Foundation - 著名的前端框架。

地址：http://foundation.zurb.com/

---

有用的产品/链接

• <head> Cheatsheet - 可以写入到<head>标签的内容清单；

地址：

https://github.com/joshbuchea/HEAD

译者注 - 中文翻译版

地址：

http://www.css88.com/archives/8052

• Ghost - 基于 Node.js 的简易博客平台；

地址：https://ghost.org/

• What runs - 用于网站技术分析的 Chrome 插件；

地址：https://www.whatruns.com/

• Learn anything - 用于分解项目的强大思维导图。

地址：

https://learn-anything.xyz/learn-anything

以上就是我个人常用的一些前端工具、框架、库的列表，希望对大家有所帮助。如果你也愿意分享一些新的发现，可以在推特上随时联系我。

• 这个话题到这里就算是说完了，我自己是名j前端程序员，建了一个千人群每天分享前端基础到项目学习资料和学习方法：249244868，欢迎初学和进阶中的小伙伴。需要更多精彩内容，敬请关注小编！

转载于：

英文原文：67 useful tools, libraries and resources for saving your time as a web developer

作者：Ognjen Gatalo