67个节省页面开发时间的实用插件、库与资源

  • 2017-09-19
  • 587
  • 8

在这篇文章中,我不会与大家谈论大型的前端框架,如 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

以上就是我个人常用的一些前端工具、框架、库的列表,希望对大家有所帮助。如果你也愿意分享一些新的发现,可以在下面留言。

评论

  • 哗然儿子Hi好回复

    还有饿了么前端ui了框架,很漂亮很好用的

  • Mon. 李回复

    JavaScript 真伟大

  • abc1995
    abc1995回复

    …蛤 不错的啊

  • 小飞侠回复

    牛逼啊不错的库,收藏了,

  • modify回复

    嗯啊m 好资源,赞一个

  • 会飞的鱼ゆミ
    会飞的鱼ゆミ回复

    Three.js是否可以显示3DMAX的模型,如果可以那就太牛逼了

  • application
    application回复

    假装我会用这些库….

  • 气象巷天歌回复

    {}….