我用這十八個(gè)神奇的庫(kù)，美化了我的項(xiàng)目，真是亮瞎我的眼！

作者：前端小智 2021-09-29 08:23:56

開發(fā) 前端

從我最喜歡的資源庫(kù)開始。有了這個(gè)庫(kù)，可以從Adobe After Effects中創(chuàng)建的動(dòng)畫直接導(dǎo)出到你的網(wǎng)站。提高你的工作效率。

[[426501]]

上代碼。。。。。。。。。。

1. Lottie-Web/Bodymovin

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

從我最喜歡的資源庫(kù)開始。有了這個(gè)庫(kù)，可以從Adobe After Effects中創(chuàng)建的動(dòng)畫直接導(dǎo)出到你的網(wǎng)站。

事例：

2. Parallax.js

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

有了這個(gè)庫(kù)，我們可以創(chuàng)建一個(gè)美麗的視差效果，可以用鼠標(biāo)移動(dòng)來(lái)控制，還可以調(diào)整移動(dòng)物體的速度。

3. Flat Surface Shader [FSS]

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

Flat Surface Shader 是一個(gè)超炫的 3D 模擬照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多邊形數(shù)組繪制三角形。它還采用原生的 Float32Arrays 存儲(chǔ)數(shù)字?jǐn)?shù)據(jù)，進(jìn)行高度優(yōu)化的計(jì)算。可以調(diào)整顏色參數(shù)預(yù)覽效果，而且可以導(dǎo)出圖像。

4. Hover.css

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

Hover.css 是一套基于 CSS3 的鼠標(biāo)懸停效果和動(dòng)畫，這些可以非常輕松的被應(yīng)用到按鈕、LOGO 以及圖片等元素。所有這些效果都是只需要單一的標(biāo)簽，必要的時(shí)候使用 before 和 after 偽元素。因?yàn)槭褂昧?CSS3 過渡、轉(zhuǎn)換和動(dòng)畫效果，因此只支持 Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器。

5. Video.js Markers

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

Video.js 是一個(gè)通用的在網(wǎng)頁(yè)上嵌入視頻播放器的 JS 庫(kù)，Video.js 自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況,如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。

有了這個(gè)插件，你可以在你網(wǎng)站上存在的視頻上放置必要的標(biāo)記，這樣就可以輕松地切換到我們需要的時(shí)間代碼。

6. Magic Grid

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

這個(gè)庫(kù)幫助我們創(chuàng)建一個(gè)自適應(yīng)網(wǎng)格，在這里你不需要?jiǎng)?chuàng)建單獨(dú)的 @media 樣式。只要指定容器，就可以了。

7. Vue/React Content Loader

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

Vue Content Loader是一個(gè)基于Vue.js的SVG占位符加載，可自定義的SVG組件，用于創(chuàng)建占位符加載，例如Facebook加載卡。

Vue Content Loader是react-content-loader的Vue實(shí)現(xiàn)。

8. React Image Gallery

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

9. WebSlides

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

WebSlides 是一個(gè)開源的 HTML 幻燈片項(xiàng)目，能夠幫助熟悉前端語(yǔ)言的開發(fā)者快速制作出效果精美的幻燈片。頁(yè)面中的每個(gè)

都是一個(gè)獨(dú)立的幻燈片，只需要很少的 CSS 代碼裝飾即可。

10. SVG.js

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

SVG.js是一個(gè)輕量級(jí)的JavaScript庫(kù)，允許你輕松操作SVG和定義動(dòng)畫。

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

11. React Motion

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

React Motion 是一個(gè) React 彈性動(dòng)畫庫(kù)，使用 0-10 的彈性參數(shù)進(jìn)行動(dòng)畫處理：

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

這個(gè)庫(kù)解決了什么問題?

對(duì)于 95% 的動(dòng)畫組件使用案例，我們沒有必要用硬編碼(把配置寫死)式的緩沖曲線和時(shí)間過渡來(lái)重排序。只需要給你的 UI 設(shè)置一個(gè)剛度系數(shù)和阻尼系數(shù)，接下來(lái)讓神奇的物理原理處理即可。用這種方式，根本無(wú)需擔(dān)心如中斷動(dòng)畫等小問題。它也極大的簡(jiǎn)化了 API 。

事例：

12. RELLAX

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

rellax.js是一款輕量級(jí)的純JavaScript滾動(dòng)視覺差特效插件。rellax.js壓縮后的版本僅871個(gè)字節(jié)，在手機(jī)等小屏幕設(shè)備中，插件會(huì)自動(dòng)限制視覺差特性。

13. Dynamics.js

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

dynamics.js 是一個(gè) Javascript 庫(kù)，可以創(chuàng)建基于物理的 CSS 動(dòng)畫。

14. mo.js

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

Mo.js是一個(gè)"簡(jiǎn)潔、高效"圖形動(dòng)畫庫(kù)，擁有流暢的動(dòng)畫和驚人的用戶體驗(yàn)，在任何設(shè)備上，屏幕密度獨(dú)立的效果都很好，你可以繪制內(nèi)置的形狀或者自定義形狀，隨便，只要你喜歡，你還可以繪制多個(gè)動(dòng)畫，再讓它們串聯(lián)在一起，逼話不多說(shuō)詳細(xì)的請(qǐng)瀏覽 Mo.js官方網(wǎng)站

15. Reveal.js

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

Reveal.js 做 PPT 的優(yōu)點(diǎn)是可以使用 markdown 語(yǔ)言直接寫靜態(tài)的文本，并可以加入各種 html 語(yǔ)言支持的交互動(dòng)畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。缺點(diǎn)是使用 markdown 時(shí)對(duì)單個(gè) HTML 元素操作不夠靈活。

這個(gè)攻略會(huì)記錄一些使用 Reveal.js 做 PPT 的心得以及經(jīng)驗(yàn)教訓(xùn)。為了簡(jiǎn)單化，會(huì)盡力使用 Markdown 做靜態(tài)頁(yè)面，在動(dòng)畫演示部分使用 p5js。