我用這十八個(gè)神奇的庫(kù),美化了我的項(xiàng)目,真是亮瞎我的眼!
上代碼。。。。。。。。。。
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è)
github: https://github.com/svgdotjs/svg.js SVG.js是一個(gè)輕量級(jí)的JavaScript庫(kù),允許你輕松操作SVG和定義動(dòng)畫。 事例地址:https://jsfiddle.net/Fuzzy/f2wbgx5a/ github: https://github.com/chenglou/react-motion React Motion 是一個(gè) React 彈性動(dòng)畫庫(kù),使用 0-10 的彈性參數(shù)進(jìn)行動(dòng)畫處理: 對(duì)于 95% 的動(dòng)畫組件使用案例,我們沒有必要用硬編碼(把配置寫死)式的緩沖曲線和時(shí)間過渡來(lái)重排序。只需要給你的 UI 設(shè)置一個(gè)剛度系數(shù)和阻尼系數(shù),接下來(lái)讓神奇的物理原理處理即可。用這種方式,根本無(wú)需擔(dān)心如中斷動(dòng)畫等小問題。它也極大的簡(jiǎn)化了 API 。 事例: github: https://github.com/dixonandmoe/rellax rellax.js是一款輕量級(jí)的純JavaScript滾動(dòng)視覺差特效插件。rellax.js壓縮后的版本僅871個(gè)字節(jié),在手機(jī)等小屏幕設(shè)備中,插件會(huì)自動(dòng)限制視覺差特性。 github: https://github.com/michaelvillar/dynamics.js dynamics.js 是一個(gè) Javascript 庫(kù),可以創(chuàng)建基于物理的 CSS 動(dòng)畫。 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)站 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。 github: https://github.com/blivesta/animsition github: https://github.com/mattdesl/svg-mesh-3d 一個(gè)將SVG字符串轉(zhuǎn)換為3D三角網(wǎng)格的高級(jí)模塊。最適合用于剪影,如字體圖標(biāo)SVG。 github: https://github.com/metafizzy/zdog zdog 是一個(gè)圓形、扁平、設(shè)計(jì)師友好的偽3D引擎,通過這個(gè)庫(kù),可以創(chuàng)建偽3D元素,不需要知道幾何或代數(shù)來(lái)創(chuàng)建幾何圖形。。 作者:Chimezie Enyinnaya 譯者:前端小智 來(lái)源:blog 原文:https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 【編輯推薦】10. SVG.js

11. React Motion
這個(gè)庫(kù)解決了什么問題?
12. RELLAX

13. Dynamics.js
14. mo.js

15. Reveal.js

16. Animsition

17. SVG Mesh 3d

18. Zdog
































