18 個驚人的 GitHub 倉庫

今天，我想舉一些優(yōu)秀的 GitHub 存儲庫示例，它們將幫助您實現(xiàn)復雜的動畫，以及在您的項目中實現(xiàn)有用的功能。

讓我們開始吧

1、Adobe After Effects 動畫

https://github.com/airbnb/lottie-web

Lottie 是一個用于 Web 和 iOS 的移動庫，它使用 Bodymovin 解析導出為 json 的 Adobe After Effects 動畫，并在移動設備上本地渲染它們！

2、視差

https://github.com/wagerfield/parallax

https://github.com/dixonandmoe/rellax

對智能設備的方向做出反應的視差引擎。在沒有陀螺儀或運動檢測硬件可用的情況下，將使用光標的位置。

3、平面著色器

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

用JavaScript編寫的簡單、輕量級的平面著色器，用于將點亮的三角形渲染到許多上下文。目前支持WebGL、Canvas 2D和SVG。

4、懸停

https://github.com/IanLunn/Hover

一組 CSS3 驅(qū)動的懸停效果，可應用于鏈接、按鈕、徽標、SVG、特色圖像等。輕松應用于您自己的元素。在 CSS、Sass 和 LESS 中可用。

5、Video 標記

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

在 videojs 播放器的進度條上顯示可自定義的標記

6、魔法網(wǎng)格

https://github.com/e-oj

一個用于動態(tài)網(wǎng)格布局的簡單、輕量級的 Javascript 庫。

7、Vue/React 內(nèi)容加載器

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

用于創(chuàng)建占位符加載的 SVG 組件，如 Facebook 卡片加載。

8、縮略圖

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

React 圖片庫組件支持縮略圖

9、網(wǎng)頁幻燈片

https://github.com/webslides/WebSlides

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

以漂亮的方式制作 HTML 演示文稿 ，reveal 包括嵌套幻燈片、Markdown 支持、自動動畫、PDF 導出，語法高亮代碼等等。

10、其他動畫

用于操作 SVG 的輕量級動畫庫

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

聲明式 API 為您提供了對動畫的完全控制，使其可輕松自定義。https://github.com/mojs/mojs

用于創(chuàng)建基于物理的動畫庫

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

11、3d 元素

https://github.com/metafizzy/zdog

使用此庫，您可以創(chuàng)建偽 3d 元素，而無需了解幾何或代數(shù)即可創(chuàng)建幾何形狀。這個庫非常容易學習，學習不會花費你太多時間。