建站
咨詢
售后
建站咨詢
新聞中心
上代碼。。。。。。。。。。
1. Lottie-Web/Bodymovin
github 地址：https://github.com/airbnb/lottie-web
從我最喜歡的資源庫(kù)開(kāi)始。有了這個(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 過(guò)渡、轉(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è)開(kāi)源的 HTML 幻燈片項(xiàng)目，能夠幫助熟悉前端語(yǔ)言的開(kāi)發(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...
- {value =>
{value.x}}
這個(gè)庫(kù)解決了什么問(wèn)題?
對(duì)于 95% 的動(dòng)畫組件使用案例，我們沒(méi)有必要用硬編碼(把配置寫死)式的緩沖曲線和時(shí)間過(guò)渡來(lái)重排序。只需要給你的 UI 設(shè)置一個(gè)剛度系數(shù)和阻尼系數(shù)，接下來(lái)讓神奇的物理原理處理即可。用這種方式，根本無(wú)需擔(dān)心如中斷動(dòng)畫等小問(wèn)題。它也極大的簡(jiǎn)化了 API 。
事例：
12. RELLAX
github: https://github.com/dixonandmoe/rellax
rellax.js是一款輕量級(jí)的純JavaScript滾動(dòng)視覺(jué)差特效插件。rellax.js壓縮后的版本僅871個(gè)字節(jié)，在手機(jī)等小屏幕設(shè)備中，插件會(huì)自動(dòng)限制視覺(jué)差特性。
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。
16. Animsition
github: https://github.com/blivesta/animsition
17. SVG Mesh 3d
github: https://github.com/mattdesl/svg-mesh-3d
一個(gè)將SVG字符串轉(zhuǎn)換為3D三角網(wǎng)格的高級(jí)模塊。最適合用于剪影，如字體圖標(biāo)SVG。
18. Zdog
github: https://github.com/metafizzy/zdog
zdog 是一個(gè)圓形、扁平、設(shè)計(jì)師友好的偽3D引擎，通過(guò)這個(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
網(wǎng)頁(yè)標(biāo)題：我用這十八個(gè)神奇的庫(kù)，美化了我的項(xiàng)目，真是亮瞎我的眼！
URL鏈接：http://m.5511xx.com/article/coeiiig.html
