我用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！

墨蓝 2022-09-14 00:27 265阅读 0赞

> 作者：Chimezie Enyinnaya  
> 译者：前端小智  
> 来源：blog

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

上代码。。。。。。。。。。

### 1. Lottie-Web/Bodymovin ###

github 地址：https://github.com/airbnb/lottie-web

从我最喜欢的资源库开始。有了这个库，可以从`Adobe After Effects`中创建的动画直接导出到你的网站。

事例：

![855e248a8188105d8da63a0398d7c398.gif][]

![6ad32776017d2b72f5356ead97aa7162.gif][]

![bd853fe413cf87075e75f08b9141aa4e.gif][]

### 2. Parallax.js ###

github: https://github.com/wagerfield/parallax

有了这个库，我们可以创建一个美丽的视差效果，可以用鼠标移动来控制，还可以调整移动物体的速度。

![055bcf2f183ddbe7168ac41c6b3207fb.gif][]

### 3. Flat Surface Shader \[FSS\] ###

github: https://github.com/wagerfield/flat-surface-shader

Flat Surface Shader 是一个超炫的 3D 模拟照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采用原生的 Float32Arrays 存储数字数据，进行高度优化的计算。可以调整颜色参数预览效果，而且可以导出图像。

![664364f3efbfc39899996319f57f6656.gif][]

### 4. Hover.css ###

github: https://github.com/IanLunn/Hover

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

![3cea9da89152023b1baec75633b7b3b2.gif][]

### 5. Video.js Markers ###

github: https://github.com/spchuang/videojs-markers

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

![6a0b02915633d9f6941c4860f0f889f5.png][]

有了这个插件，你可以在你网站上存在的视频上放置必要的标记，这样就可以轻松地切换到我们需要的时间代码。

### 6. Magic Grid ###

github: https://github.com/e-oj/Magic-Grid

这个库帮助我们创建一个自适应网格，在这里你不需要创建单独的 `@media` 样式。只要指定容器，就可以了。

![b8e1c4bd8b6c2605b29cfae623105222.gif][]

### 7. Vue/React Content Loader ###

github: https://github.com/egoist/vue-content-loader

Vue Content Loader是一个基于Vue.js的SVG占位符加载，可自定义的SVG组件，用于创建占位符加载，例如Facebook加载卡。

Vue Content Loader是react-content-loader的Vue实现。

![ca055f2debcfde33c93357b9e8d2c0a2.gif][]

### 8. React Image Gallery ###

github: https://github.com/xiaolin/react-image-gallery

![503c0088f594fe183b590f127b3bc129.gif][]

### 9. WebSlides ###

github: https://github.com/webslides/WebSlides

WebSlides 是一个开源的 HTML 幻灯片项目，能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片。页面中的每个 `<section>` 都是一个独立的幻灯片，只需要很少的 CSS 代码装饰即可。

![9b9dc7dab708d6d8250d3bf00d388e83.gif][]

### 10. SVG.js ###

github: https://github.com/svgdotjs/svg.js

SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。

![ca8337a343b503af7bde7bd752718fee.gif][]

事例地址：https://jsfiddle.net/Fuzzy/f2wbgx5a/

### 11. React Motion ###

github: https://github.com/chenglou/react-motion

React Motion 是一个 React 弹性动画库，使用 0-10 的弹性参数进行动画处理：

import {Motion, spring} from 'react-motion';
    // In your render...
    <Motion defaultStyle={
       {x: 0}} style={
       {x: spring(10)}}>
      {value => <div>{value.x}</div>}
    </Motion>

**这个库解决了什么问题？**

对于 95% 的动画组件使用案例，我们没有必要用硬编码(把配置写死)式的缓冲曲线和时间过渡来重排序。只需要给你的 UI 设置一个刚度系数和阻尼系数，接下来让神奇的物理原理处理即可。用这种方式，根本无需担心如中断动画等小问题。它也极大的简化了 API 。

事例：

![13ce612e7d8bd92c7189be01a67471af.gif][]

![e1905bb10e95f36370bb87d5c7dc2ccb.gif][]

![68c249644b600b326a0e7b170454c9fc.gif][]

### 12. RELLAX ###

github: https://github.com/dixonandmoe/rellax

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。

![8fd4fd932f78162872fb422b06f96174.gif][]

### 13. Dynamics.js ###

github: https://github.com/michaelvillar/dynamics.js

dynamics.js 是一个 Javascript 库，可以创建基于物理的 CSS 动画。

![44784f1d792386aa144f2d682ceedf4c.gif][]

### 14. mo.js ###

github: https://github.com/mojs/mojs

Mo.js是一个"简洁、高效"图形动画库，拥有流畅的动画和惊人的用户体验，在任何设备上，屏幕密度独立的效果都很好，你可以绘制内置的形状或者自定义形状，随便，只要你喜欢，你还可以绘制多个动画，再让它们串联在一起，逼话不多说详细的请浏览 Mo.js官方网站

![b4637ac2cace6bb3407ee091bccdf3ab.gif][]

![78948efa9a67b40c627e4b2a579e73fd.gif][]

### 15. Reveal.js ###

github:https://github.com/hakimel/reveal.js

Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。缺点是使用 markdown 时对单个 HTML 元素操作不够灵活。

这个攻略会记录一些使用 Reveal.js 做 PPT 的心得以及经验教训。为了简单化，会尽力使用 Markdown 做静态页面，在动画演示部分使用 p5js。

![337bed1d5d044eeb7faefdea1e9a828f.gif][]

### 16. Animsition ###

github: https://github.com/blivesta/animsition

![56fb8bb67c1d8826807dc54465a8ed10.gif][]

### 17. SVG Mesh 3d ###

github: https://github.com/mattdesl/svg-mesh-3d

一个将SVG字符串转换为3D三角网格的高级模块。最适合用于剪影，如字体图标SVG。

![7b61da07a53fc8b66c29dbca43344bcf.gif][]

### 18. Zdog ###

github: https://github.com/metafizzy/zdog

zdog 是一个圆形、扁平、设计师友好的伪3D引擎，通过这个库，可以创建伪3D元素，不需要知道几何或代数来创建几何图形。。

![1dffc62ae9b1a53ad9b5e03a8803d4f2.gif][]

~完，我是刷碗智，这篇文章整理完是北京时间： 2021/09/22 中午：12：35，我去刷碗了，我们下期见~

--------------------

**编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo

## 交流 ##

文章每周持续更新，可以微信搜索\*\*【大迁世界 】**第一时间阅读，回复**【福利】\*\*有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[855e248a8188105d8da63a0398d7c398.gif]: /images/20220828/fdbbb7858e884ed0a8840be484dd6626.png
[6ad32776017d2b72f5356ead97aa7162.gif]: /images/20220828/6643bfbe8d9f4137bc7c44f4e0f63e69.png
[bd853fe413cf87075e75f08b9141aa4e.gif]: /images/20220828/2de294a62d274fb88f309049e5cb6587.png
[055bcf2f183ddbe7168ac41c6b3207fb.gif]: /images/20220828/79a03c6fd9e247b1bfcb10b5d727d3bd.png
[664364f3efbfc39899996319f57f6656.gif]: /images/20220828/057f50eaec354e7384d2abdee140f8d0.png
[3cea9da89152023b1baec75633b7b3b2.gif]: /images/20220828/8f8c58380e174283baa93842c0e53d91.png
[6a0b02915633d9f6941c4860f0f889f5.png]: /images/20220828/29cb657e477144d093a22724e4b09429.png
[b8e1c4bd8b6c2605b29cfae623105222.gif]: /images/20220828/251e37b506e6442d8a424fd62e729d79.png
[ca055f2debcfde33c93357b9e8d2c0a2.gif]: /images/20220828/d926a44e203049df845c026a99572bca.png
[503c0088f594fe183b590f127b3bc129.gif]: /images/20220828/0063ebed0533437aa7c8c4c5025bc461.png
[9b9dc7dab708d6d8250d3bf00d388e83.gif]: /images/20220828/243aa13d0adb4ff19c0b785ad603104d.png
[ca8337a343b503af7bde7bd752718fee.gif]: /images/20220828/8916d426cd884161ab7bd80231bab4ba.png
[13ce612e7d8bd92c7189be01a67471af.gif]: /images/20220828/74ae19e315bc416b9bf96f15394ebdc5.png
[e1905bb10e95f36370bb87d5c7dc2ccb.gif]: /images/20220828/0fb24aa013184cd68056a4c501033079.png
[68c249644b600b326a0e7b170454c9fc.gif]: /images/20220828/3ea3cdc22d5e4262901b543702750775.png
[8fd4fd932f78162872fb422b06f96174.gif]: /images/20220828/c7c2cbf93ce24307a4e7fecf0a419f96.png
[44784f1d792386aa144f2d682ceedf4c.gif]: /images/20220828/588450250d4f4a539f8ad681045ada47.png
[b4637ac2cace6bb3407ee091bccdf3ab.gif]: /images/20220828/6decbac136c34d08ba8cc7f65be281bd.png
[78948efa9a67b40c627e4b2a579e73fd.gif]: /images/20220828/1a33d9fa906e4168b303bfdc0b9e4735.png
[337bed1d5d044eeb7faefdea1e9a828f.gif]: /images/20220828/69feb052b09740c48e7403354f67f4fc.png
[56fb8bb67c1d8826807dc54465a8ed10.gif]: /images/20220828/61597033364d4dd9b5f6b4937220bcb6.png
[7b61da07a53fc8b66c29dbca43344bcf.gif]: /images/20220828/2b2d4af9dfd1498685042705f5c834c4.png
[1dffc62ae9b1a53ad9b5e03a8803d4f2.gif]: /images/20220828/953996e18c764cedb7ff205b231ef8e9.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi