九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪

左手的ㄟ右手 2023-09-27 04:30 11阅读 0赞

## 九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪 ##

九个前端神奇库

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

#### 文章目录 ####

*  九个前端神奇库，让你的前端项目瞬间美化，甲方看了都落泪
 *  1. Lottie-web/Bodymovin
 *  2. Parallax.js
 *  3. Magic Grid
 *  4. webslides
 *  5. SVG.js
 *  6. rellax
 *  7. dynamics.js
 *  8. mo.js
 *  9. zdog

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

## 1. Lottie-web/Bodymovin ##

库地址：[https://github.com/airbnb/lottie-web][https_github.com_airbnb_lottie-web]

有了这个库，可以从Adode After Effects 中场景的动画直接导出到你的网址  
![在这里插入图片描述][69973e6a1dce4ce799c0da03b7d2771b.png]

## 2. Parallax.js ##

库地址：[https://github.com/wagerfield/parallax][https_github.com_wagerfield_parallax]

这个库可以创建一个美丽的视差效果，用鼠标移动来控制，还可以调整移动物体的速度  
![在这里插入图片描述][bab2cc06701a432a836560f9f1633d0e.png]

## 3. Magic Grid ##

库地址：[https://github.com/e-oj/Magic-Grid][https_github.com_e-oj_Magic-Grid]

这个库帮助我们创建一个自适应网格，在这里你不需要创建单独的@media样式 只要指定容器就可以了  
![在这里插入图片描述][de5dc59a4f674c5785e3e39e6126507d.png]

## 4. webslides ##

库地址：[https://github.com/webslides/webslides][https_github.com_webslides_webslides]

webslides是一个开源的HTML幻灯片项目，能够帮助熟悉前端语言的开发者快速制造出效果精美的幻灯片  
页面中的每个 < section > 都是一个独立的幻灯片，只需要很少的css代码装饰即可  
![在这里插入图片描述][8cf937c06dbb402289e1e0a14a4ddaf4.png]

## 5. SVG.js ##

库地址：[https://github.com/svgdotjs/svg.js][https_github.com_svgdotjs_svg.js]

SVG.js 是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画  
![在这里插入图片描述][373fc157e03b43d380f7bc489095ef77.png]

## 6. rellax ##

库地址：[https://github.com/dixonandmoe/rellax][https_github.com_dixonandmoe_rellax]

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件，rellax.js 压缩后的版本只有871字节  
在手机小屏幕设备中，插件会自动限制视觉特性  
![在这里插入图片描述][7698066a1646403b8db426b94d87acd4.png]

## 7. dynamics.js ##

库地址：[https://github.com/michaelvillar/dynamics.js][https_github.com_michaelvillar_dynamics.js]

dynamics.js是一个JavaScript库，可以创建基于物理的CSS动画  
![在这里插入图片描述][4f70b9761529475d8b73b86cb11ca45e.png]

## 8. mo.js ##

库地址：[https://github.com/mojs//mojs][https_github.com_mojs_mojs]

mo.js是一个简洁，高效图形动画库，拥有流畅的动画和惊人的用户体验  
![在这里插入图片描述][e478043152e545ee8f5956a93b9ab3dd.png]

## 9. zdog ##

库地址：[https://github.com/metafizzy/zdog][https_github.com_metafizzy_zdog]

zdog是一个圆形，扁平，设计师友好的伪3D引擎，通过这个库，可以创建伪3D元素

![在这里插入图片描述][eab5e18575984197ad6f79806a553376.png]

> 来源：B站@小桃就不淘  
> 视频地址：[视频地址讲解][Link 1]

[https_github.com_airbnb_lottie-web]: https://github.com/airbnb/lottie-web
[69973e6a1dce4ce799c0da03b7d2771b.png]: https://img-blog.csdnimg.cn/69973e6a1dce4ce799c0da03b7d2771b.png
[https_github.com_wagerfield_parallax]: https://github.com/wagerfield/parallax
[bab2cc06701a432a836560f9f1633d0e.png]: https://img-blog.csdnimg.cn/bab2cc06701a432a836560f9f1633d0e.png
[https_github.com_e-oj_Magic-Grid]: https://github.com/e-oj/Magic-Grid
[de5dc59a4f674c5785e3e39e6126507d.png]: https://img-blog.csdnimg.cn/de5dc59a4f674c5785e3e39e6126507d.png
[https_github.com_webslides_webslides]: https://github.com/webslides/webslides
[8cf937c06dbb402289e1e0a14a4ddaf4.png]: https://img-blog.csdnimg.cn/8cf937c06dbb402289e1e0a14a4ddaf4.png
[https_github.com_svgdotjs_svg.js]: https://github.com/svgdotjs/svg.js
[373fc157e03b43d380f7bc489095ef77.png]: https://img-blog.csdnimg.cn/373fc157e03b43d380f7bc489095ef77.png
[https_github.com_dixonandmoe_rellax]: https://github.com/dixonandmoe/rellax
[7698066a1646403b8db426b94d87acd4.png]: https://img-blog.csdnimg.cn/7698066a1646403b8db426b94d87acd4.png
[https_github.com_michaelvillar_dynamics.js]: https://github.com/michaelvillar/dynamics.js
[4f70b9761529475d8b73b86cb11ca45e.png]: https://img-blog.csdnimg.cn/4f70b9761529475d8b73b86cb11ca45e.png
[https_github.com_mojs_mojs]: https://github.com/mojs//mojs
[e478043152e545ee8f5956a93b9ab3dd.png]: https://img-blog.csdnimg.cn/e478043152e545ee8f5956a93b9ab3dd.png
[https_github.com_metafizzy_zdog]: https://github.com/metafizzy/zdog
[eab5e18575984197ad6f79806a553376.png]: https://img-blog.csdnimg.cn/eab5e18575984197ad6f79806a553376.png
[Link 1]: https://www.bilibili.com/video/BV1fe4y1D7o6?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=5aa8b1173a5322d8b02385c182afe071