web工具

1.scrollReveal.js – 让页面滚动显示动画JS

官网:https://scrollrevealjs.org/

github地址:https://github.com/scrollreveal/scrollreveal

好的博客:https://blog.csdn.net/weixin_39801446/article/details/82143296

2.push.js  世界上最通用的桌面通知框架

官网:https://pushjs.org/#

github:https://github.com/Nickersoft/push.js 

好的博客:https://www.jianshu.com/p/3e4a14fe5e78

3.enquire.js  —— js判断 浏览器环境 

官网:http://wicky.nillia.ms/enquire.js/#v2.0.0

github:https://github.com/wickynilliams/enquire.js/

4.NProgress.js  —— 网站加载进度条

官网:http://ricostacruz.com/nprogress/

github:https://github.com/rstacruz/nprogress/

5.driver.js —— 前端操作引导js工具

官网:https://kamranahmed.info/driver.js/

github:https://github.com/kamranahmedse/driver.js

6.Editor.js ——— 前端编辑器工具

官网:https://editorjs.io/

github:https://github.com/codex-team/editor.js

7.html2canvas ——— 这个很酷的脚本获取页面中的元素和样式,并通过呈现DOM的副本来获取“屏幕截图”。由于屏幕截图是基于DOM的,它们可能不是100%准确,但是本库仍然是调试和自动化测试的一个很好的工具

官网:http://html2canvas.hertzen.com/

github:https://github.com/niklasvh/html2canvas

8. Choices —————— 轻量级库,用于制作高度可自定义的选择框、文本区域和其他输入表单。类似于select2和selectize,但没有依赖jquery。

官网:https://joshuajohnson.co.uk/Choices/

github:https://github.com/jshjohnson/Choices

9.Indigo Player ———— 高度扩展,现代的javascript视频播放器。支持MPEG-Dash / HLS / MPEG-4,并构建在HTML5视频元素之上。视频播放器具有开箱即用的功能,如字幕、缩略图、质量选择等。高度可扩展、现代化,并为大多数流行的视频格式和编解码器提供支持。

官网:https://matvp91.github.io/indigo-player/#/

github:https://github.com/matvp91/indigo-player

 

9.Twemoji ———— Twitter团队提供的强大表情符号库,在所有平台上提供标准的Unicode emoji支持。有了超过3000个emojis和一个稳定的API,当你想将emojis添加到你的应用程序中时,它是一个完美的解决方案。

官网:https://twemoji.twitter.com/

github:https://github.com/twitter/twemoji

 

10.stepper ———— 非常好的数字步进控件,非常适合上/下式的增减控制或其他计数器控件。点击箭头会产生非常帮的动画与光滑的CSS效果。

github:https://github.com/alikinvv/stepper

11.Dropcss ———— 彻底的CSS清理程序,它将获取HTML和CSS,并只返回实际使用的样式。它删除所有未使用的样式块、重复的选择器、@keyframes等等。高度优化,速度极快。

github:https://github.com/leeoniya/dropcss

12.React Lodon ———— React组件,允许您使用一系列动态生成的图像来使网站的favicon图标产生动画。这个效果可以用作进度或加载指示器,也可以作为一个很酷的小动画,使您的页面脱颖而出。

官网:https://foreseaz.github.io/react-loadcon/

github:https://github.com/foreseaz/react-loadcon

13.twemoji————一个简单的库,可在所有平台上提供标准的Unicode 表情符号支持。Twemoji v11.0符合 Unicode 11.0规范,并支持表情符号11.0草案规范 ,Twemoji 库为2841个表情符号提供支持,包括肤色和性别修饰语。

官网: https://twemoji.twitter.com/

github:https://github.com/twitter/twemoji

 

 

 

 

绘图工具

1.pixijs  —— 2D绘图工具(3D也行但是不专业)

官网:https://www.pixijs.com/

github:https://github.com/pixijs/pixi.js

2.Fabric.js —— 2D绘图工具(具有一定交互性的框架)

tip:如果遇到问题,可以github提issue,老外服务态度很好,开源nice

官网:http://fabricjs.com/

github:https://github.com/fabricjs/fabric.js

3.dat.gui —— 绘图调试工具

介绍:http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

github:https://github.com/dataarts/dat.gui

4.stats.js —— 绘图渲染监控

介绍:http://mrdoob.github.io/stats.js/

github:https://github.com/mrdoob/stats.js

 

React 工具

1. Ant Motion – 阿里的开源动效库(滚动页面动画,css动画,队列动画,轮播动画,字体动画)

官网:https://motion.ant.design/index-cn

github地址:https://github.com/ant-design/ant-motion/

2.Connected React Router – redux方式进行路由操作(一般不需要这个库)

github地址:https://github.com/supasate/connected-react-router

3.react-intl – react国际化

文档:https://github.com/yahoo/react-intl/wiki

github地址: https://github.com/yahoo/react-intl

界上最通用的桌面通知框架达到1.0

世界上最通用的桌面通知框架达到1.0

完全支持ES2015,第三方插件等等

世界上最通用的桌面通知框架达到1.0

完全支持ES2015,第三方插件等等

世界上最通用的桌面通知框架达到1.0

完全支持ES2015,第三方插件等等

 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐