共计 3081 个字符，预计需要花费 8 分钟才能阅读完成。
作者：Chimezie Enyinnaya
译者：前端小智
起源：blog
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
上代码。。。。。。。。。。
1. Lottie-Web/Bodymovin
github 地址：https://github.com/airbnb/lot…
从我最喜爱的资源库开始。有了这个库，能够从 Adobe After Effects 中创立的动画间接导出到你的网站。
事例：
2. Parallax.js
github: https://github.com/wagerfield…
有了这个库，咱们能够创立一个漂亮的视差成果，能够用鼠标挪动来管制，还能够调整挪动物体的速度。
3. Flat Surface Shader [FSS]
github: https://github.com/wagerfield…
Flat Surface Shader 是一个超炫的 3D 模仿照明成果，能够配置应用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采纳原生的 Float32Arrays 存储数字数据，进行高度优化的计算。能够调整色彩参数预览成果，而且能够导出图像。
4. Hover.css
github: https://github.com/IanLunn/Hover
Hover.css 是一套基于 CSS3 的鼠标悬停成果和动画，这些能够十分轻松的被利用到按钮、LOGO 以及图片等元素。所有这些成果都是只须要繁多的标签，必要的时候应用 before 和 after 伪元素。因为应用了 CSS3 过渡、转换和动画成果，因而只反对 Chrome、Firefox 和 Safari 等古代浏览器。
5. Video.js Markers
github: https://github.com/spchuang/v…
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的反对状况, 如果不反对 HTML5 则主动应用 Flash 播放器。
有了这个插件，你能够在你网站上存在的视频上搁置必要的标记，这样就能够轻松地切换到咱们须要的工夫代码。
6. Magic Grid
github: https://github.com/e-oj/Magic…
这个库帮忙咱们创立一个自适应网格，在这里你不须要创立独自的 @media 款式。只有指定容器，就能够了。
7. Vue/React Content Loader
github: https://github.com/egoist/vue…
Vue Content Loader 是一个基于 Vue.js 的 SVG 占位符加载，可自定义的 SVG 组件，用于创立占位符加载，例如 Facebook 加载卡。
Vue Content Loader 是 react-content-loader 的 Vue 实现。
8. React Image Gallery
github: https://github.com/xiaolin/re…
9. WebSlides
github: https://github.com/webslides/…
WebSlides 是一个开源的 HTML 幻灯片我的项目，可能帮忙相熟前端语言的开发者疾速制作出成果精美的幻灯片。页面中的每个 <section> 都是一个独立的幻灯片，只须要很少的 CSS 代码装璜即可。
10. SVG.js
github: https://github.com/svgdotjs/s…
SVG.js 是一个轻量级的 JavaScript 库，容许你轻松操作 SVG 和定义动画。
事例地址：https://jsfiddle.net/Fuzzy/f2…
11. React Motion
github: https://github.com/chenglou/r…
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。
事例：
12. RELLAX
github: https://github.com/dixonandmo…
rellax.js 是一款轻量级的纯 JavaScript 滚动视觉差特效插件。rellax.js 压缩后的版本仅 871 个字节，在手机等小屏幕设施中，插件会主动限度视觉差个性。
13. Dynamics.js
github: https://github.com/michaelvil…
dynamics.js 是一个 Javascript 库，能够创立基于物理的 CSS 动画。
14. mo.js
github: https://github.com/mojs/mojs
Mo.js 是一个 ” 简洁、高效 ” 图形动画库，领有晦涩的动画和惊人的用户体验，在任何设施上，屏幕密度独立的成果都很好，你能够绘制内置的形态或者自定义形态，轻易，只有你喜爱，你还能够绘制多个动画，再让它们串联在一起，逼话不多说具体的请浏览 Mo.js 官方网站
15. Reveal.js
github:https://github.com/hakimel/re…
Reveal.js 做 PPT 的长处是能够应用 markdown 语言间接写动态的文本，并能够退出各种 html 语言反对的交互动画，而后由 Pandoc 间接转化成 PPT。毛病是应用 markdown 时对单个 HTML 元素操作不够灵便。
这个攻略会记录一些应用 Reveal.js 做 PPT 的心得以及经验教训。为了简单化，会尽力应用 Markdown 做动态页面，在动画演示局部应用 p5js。
16. Animsition
github: https://github.com/blivesta/a…
17. SVG Mesh 3d
github: https://github.com/mattdesl/s…
一个将 SVG 字符串转换为 3D 三角网格的高级模块。最适宜用于掠影，如字体图标 SVG。
18. Zdog
github: https://github.com/metafizzy/…
zdog 是一个圆形、扁平、设计师敌对的伪 3D 引擎，通过这个库，能够创立伪 3D 元素，不须要晓得几何或代数来创立几何图形。。
~ 完，我是刷碗智，这篇文章整顿完是北京工夫：2021/09/22 中午：12：35，我去刷碗了，咱们下期见~
编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://dev.to/kerthin/18-ama…
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。