JavaScript
框架/库
Animations
- vivus：可以动态描绘 SVG 的 JS 库, 支持多种动画
- Web Animation：Javascript 实现的 Web Animation API
- scrollReveal.js：使元素以非常酷帅的方式进入画布 (Viewpoint)
- snabbt.js：一个利用 Javascript 和 CSS transform 的 animation 库
- 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：多种图片轮播效果，多选项的
- icheck：一款漂亮的 Checkbox 插件
- iscroll：高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库，且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
- Slideout.js：一个非常美观的侧滑菜单
- 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：经典的网页对话框组件
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特效
- singlediv：仅用一个div就画出图标
- icono：一款用纯 CSS3 实现的图标库
- css3lib：CSS3 UI 库，腾讯团队出品，多种css3特效库
- 最强9种css3圆形按钮hover鼠标经过动画效果
- 多种按钮悬停效果
网站
工具类
用于前端优化的一些检测工具
- caniuse：查看html5和css3浏览器的支持情况
- html5test：测试浏览器对html5的支持情况
- css3test：测试浏览器对css3的支持情况
- 开源中国在线工具
- 在线工具，做最专业的工具网站
- 阿里测：网站性能测试分析
- PageSpeed：谷歌家的网页性能工具
- iTest：iTest爱测试前端测试服务，多浏览器测试
设计类
辅助是设计
- Awwwards：一家筛选评比互联网上最佳网站设计开发的网站
大公司前端团队官网
- alloyteam：腾讯全端 AlloyTeam 团队 Blog
学习资源汇总类
- awesome：awesome 汇总，github上超全面资源集合
- awesome-resources
- 免费的编程中文书籍索引：Github上面的免费的计算机编程类中文书籍
- 谷歌的前端性能优化文章列表
前端
兼容性
- Placeholders.js：为不支持的 HTML5 的浏览器提供 Placeholder 支持
模板
好看的网站模板，可以参考。
移动端
框架
- amazeui：中国首个开源 HTML5 跨屏前端框架
后端
nodejs
- nodeschool：基于 Node.js 打造的、跑在终端上的开源教学课程。
- node-lessons：Node.js 包教不包会
来源：http://segmentfault.com/a/1190000003011977
作者：RayLiao
时间： 2024-10-10 23:46:18