67 个JavaScript和CSS实用工具、库与资源
在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。
或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。
由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来 Enjoy 吧！
JavaScript 库
- Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库；
- Three.js - 用于在网页上创建 3D 物体与空间的 JS 库；
- Fullpage.js - 易于实现全屏滚动功能的库；
- Typed.js - 实现打字机效果；
- Waypoints.js - 滚动到元素触发事件的库；
- Highlight.js - 页面上语法高亮显示；
- Chart.js - 纯 JS 制作漂亮的图表；
- Instantclick - 鼠标悬停预先加载页面资源，大大加速你的网站响应速度；
- Chartist - 开源响应式图表库；
- Motio - 基于 sprite 的动画和平移库；
- Animstion - 页面切换动画的 jQuery 插件；
- Barba.js - 创建页面间流畅平滑的过渡效果；
- TwentyTwenty - jQuery 视差插件；
- Vivus.js - 可以执行 SVG 路径动画的轻量级 JS 库；
- Wow.js - 页面滚动时展现动画效果；
- Scrolline.js - 页面滚动时显示滚动进度的 jQuery 插件；
- Velocity.js - 用于加速 JavaScript 动画；
- Animate on scroll - 页面滚动时增添元素动画的小型库；
- Handlebars.js - JavaScript 模板引擎；
- jInvertScroll - 轻量级的 jQuery 水平视差插件；
- One page scroll - 实现苹果风格单页滚动效果的 jQuery 插件；
- Parallax.js - 轻量级的视差引擎，能够对智能设备的方向作出反应；
- Typeahead.js - 搜索框自动补全的 JS 库；
- Dragdealer.js - 基于拖动的 JavaScript 组件；
- Bounce.js - 快速创建漂亮的 CSS3 动画效果；
- Pagepiling.js - 创建全屏滚动效果；
- Multiscroll.js - 创建两列垂直反向滚动效果的 jQuery 插件；
- Favico.js - 动态图标插件；
- Midnight.js - 固定头部切换效果；
- Anime.js - JavaScript 动画引擎；
- Keycode - 获取键盘按键的 JS 键码值；
- Sortable - 用于拖拽排序的 JavaScript 库；
- Flexdatalist - 支持
<datalist>的 jQuery 自动完成插件； - Slideout.js - 实现滑出式 Web App 导航菜单；
- Jquerymy - 实时、复杂的双向数据绑定 jQuery 插件；
- Cleave.js - 自动格式化表单输入框的文本内容；
- Page - 构建单页应用的小型客户端路由库；
- Selectize.js - 基于 jQuery 的
<select>UI 控件，用于创建tag标签输入框和 select 下拉框； - Nice select - 创建漂亮下拉框的 jQuery 插件；
- Tether - 使用绝对定位创建两个互相相关元素的 JS 库；
- Shepherd.js - 创建新手引导的 JS 库；
- Tooltip - 工具提示插件；
- Select2 - 基于 jQuery 的替代选择框；
- IziToast - 轻量的跨浏览器响应式消息通知插件；
- IziModal - 炫酷的 jQuery 模态窗口插件。
CSS 库与设计资源
- Animate.css - 强大的 CSS3 动画库；
- Flat UI Colors - 漂亮的扁平化配色；
- Material Design Lite - 基于谷歌 Material Design 的前端框架；
- Colorrrs - 随机颜色生成器；
- Section separators - CSS 区域分割；
- Topcoat - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具；
- Create Ken Burns Effect - 利用 CSS3 实现的 Ken burns 特效；
- DynCSS - 用于分析 CSS
-dyn-属性规则，并使其具备动态属性； - Magic animations - 具备特殊动效的 CSS3 动画；
- CSSpin - 丰富的 CSS 加载动画；
- Feather icons - 简单、漂亮的开源图标库；
- Ion icons - 专为 Ionic 框架设计的图标字体；
- Font Awesome - 可缩放的矢量图标字库；
- Font Generator - 在线字体生成器；
- On/Off FlipSwitch - 在线创建纯 CSS3 动画开关效果；
- UIkit - 轻量级的模块化前端框架；
- Bootstrap - 著名的前端框架；
- Foundation - 著名的前端框架。
有用的产品/链接
- <head> Cheatsheet - 可以写入到
<head>标签的内容清单；（译者注：中文翻译版地址） - Ghost - 基于 Node.js 的简易博客平台；
- What runs - 用于网站技术分析的 Chrome 插件；
- Learn anything - 用于分解项目的强大思维导图。
以上就是我个人常用的一些前端工具、框架、库的列表，希望对大家有所帮助。如果你也愿意分享一些新的发现，可以在推特上随时联系我。
感谢你的阅读。若你有所收获，欢迎点赞与分享。
注：
- 本文版权归原作者所有，仅用于学习与交流；
- 如需转载译文，烦请按下方注明出处信息，谢谢！
英文原文：67 useful tools, libraries and resources for saving your time as a web developer
作者：Ognjen Gatalo
译者：IT程序狮
译文地址：http://www.jianshu.com/p/c95e400e43b6
作者：IT程序狮
链接：http://www.jianshu.com/p/c95e400e43b6
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
67 个JavaScript和CSS实用工具、库与资源的更多相关文章
- JavaScript和CSS实用工具、库与资源
JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js - 用于在网页上创建 3 ...
- Lodash JavaScript 实用工具库
地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.
- JavaScript 实用工具库 : lodashjs
首页地址:https://www.lodashjs.com/
- 8个提高效率的CSS实用工具
CSS,也就是Cascading Style Sheets,推出于1997年,差不多是17年前,至此为我们开发网页大开方便之门,协助我们制作出一个又一个惊艳绝伦的网站设计和模板,提升了我们的创造能力, ...
- lodash (js实用工具库)
是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src=&q ...
- js工具库---Lodash
Lodash是一个一致性.模块化.高性能的 JavaScript 实用工具库 为什么选择 Lodash ? Lodash 通过降低 array.number.objects.string 等等的使用难 ...
- iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码
iOS精选源码 电商商品详情 Swift.两种方式实现tableViewCell拖拽功能 ffmpeg+openGL播放器 微信聊天表情雨.表情下落.表情动画 iOS指示器集锦 弹窗增加 picker ...
- 2018年你需要知道的13个JavaScript工具库
译者按: 你可能已经用到Underscore或者Lodash.本文列举了13个常用的JavaScript工具库来提高开发效率. 原文: 11 Javascript Utility Libraries ...
- 3 月 15 个有意思的 JavaScript 和 CSS 库
Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势.这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因. BasicScroll https://github ...
随机推荐
- 面试：用 Java 逆序打印链表
昨天的 Java 实现单例模式 中,我们的双重检验锁机制因为指令重排序问题而引入了 volatile 关键字,不少朋友问我,到底为啥要加 volatile 这个关键字呀,而它,到底又有什么神奇的作用呢 ...
- 跨界 - Omi 发布多端统一框架 Omip 打通小程序与 Web
Omip 今天,Omi 不仅仅可以开发桌面 Web.移动 H5,还可以直接开发小程序!直接开发小程序!直接开发小程序! Github Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架, ...
- awk分析mysql状态
今天是腊月27,明天是腊月28,一到过年,就习惯说农历,而不说公历.这两天挺闲的,就再造一把. 话说Linux处理文本工具有三剑客,awk.grep.sed,其中awk最为厉害,grep也挺是常用.今 ...
- 【转载】SQL中inner join、outer join和cross join的区别
对于SQL中inner join.outer join和cross join的区别很多人不知道,我也是别人问起,才查找资料看了下,跟自己之前的认识差不多, 如果你使用join连表,缺陷的情况下是inn ...
- ps昏暗室内照片调成暖色光亮效果
最终效果 一.打开素材图片,把背景图层复制一层,做HDR滤镜操作,如果你没有这款滤镜,可以去网上下载,参数及效果如下图. 二.复制一层,用Noise滤镜做降噪处理,参数及效果如下图. 三.新建一个图层 ...
- PS调出春夏外景婚纱照
效果图 先来看看原图和夏季的效果图 先看看原图 教程终于来咯 原图暗部太深,需要将暗部提亮.可以把暗部选区选出来.为了精确选择暗部选区,我利用计算命令如上图所示.最后得到暗部的选区. 上图得到了暗部选 ...
- Django中CBV的执行顺序之源码解析
浅析Django中的CBV的执行顺序 下图为CBV方式的执行顺序,大概执行流程如下: 其中浅蓝色为在假设自己写的类,即Test类中没有dispatch方法的情况下的执行顺序,当自己的类中有dispat ...
- 后台管理系统之系统操作日志开发(Java实现)
一,功能点 实现管理员操作数据的记录.效果如下 二,代码实现 基于注解的Aop日志记录 1.Log实体类 package com.ideal.manage.guest.bean.log; import ...
- Nginx会话保持之nginx-sticky-module模块
Nginx会话保持之nginx-sticky-module模块 - 天行健,君子以自强不息:地势坤,君子以厚德载物. - CSDN博客https://blog.csdn.net/huangjinjin ...
- 安全测试学习之bWAPP环境搭建
安装环境:window7+IIS+mysql+php bWAPP下载地址:https://sourceforge.net/projects/bwapp/files/bee-box/ ,直接点击Dow ...