I used these 18 amazing libraries to beautify my project, which really blinds me!

Author: Chimezie Enyinnaya
Translator: Frontend Xiaozhi
Source: blog

If you have dreams and dry goods, search on [Great Move to the World] Follow the brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Upload the code. . . . . . . . . .

1. Lottie-Web/Bodymovin

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

Start with my favorite resource library. With this library, you can Adobe After Effects directly to your website.

case:

2. Parallax.js

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

With this library, we can create a beautiful parallax effect, which can be controlled by mouse movement, and the speed of moving objects can also be adjusted.

3. Flat Surface Shader [FSS]

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

Flat Surface Shader is a stunning 3D simulation lighting effect, which can be configured to use Canvas-based 2D context or SVG polygon array to draw triangles. It also uses native Float32Arrays to store digital data for highly optimized calculations. The color parameter preview effect can be adjusted, and the image can be exported.

4. Hover.css

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

Hover.css is a set of CSS3 based mouse hovering effects and animations, which can be easily applied to buttons, LOGO, pictures and other elements. All these effects require only a single label, using before and after pseudo-elements when necessary. Because CSS3 transitions, transitions, and animation effects are used, only modern browsers such as Chrome, Firefox, and Safari are supported.

5. Video.js Markers

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

Video.js is a universal JS library for embedding a video player on a web page. Video.js automatically detects the browser's support for HTML5, and if it does not support HTML5, it automatically uses the Flash player.

With this plugin, you can place the necessary markers on the videos that exist on your website, so that you can easily switch to the time code we need.

6. Magic Grid

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

This library helps us create an adaptive grid, here you don’t need to create a separate @media style. Just specify the container and that's it.

7. Vue/React Content Loader

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

Vue Content Loader is a Vue.js-based SVG placeholder loading, a customizable SVG component used to create placeholder loading, such as Facebook loading cards.

Vue Content Loader is a Vue implementation of react-content-loader.

8. React Image Gallery

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

9. WebSlides

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

WebSlides is an open source HTML slideshow project that can help developers who are familiar with front-end languages to quickly produce beautiful slideshows. Each <section> page is an independent slide, and only needs a few CSS code decorations.

10. SVG.js

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

SVG.js is a lightweight JavaScript library that allows you to easily manipulate SVG and define animations.

address: 1615cf51c0fc05 https://jsfiddle.net/Fuzzy/f2wbgx5a/

11. React Motion

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

React Motion is a React flexible animation library that uses 0-10 flexible parameters for animation processing:

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

What problem does the

For 95% of the animation component use cases, we don't need to reorder the buffer curves and time transitions with hard-coded (decoding the configuration) style. Just set a stiffness coefficient and damping coefficient for your UI, and then let the magical physics principles deal with it. In this way, there is no need to worry about minor issues such as interrupting the animation. It also greatly simplifies the API.

case:

12. RELLAX

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

rellax.js is a lightweight pure JavaScript scrolling visual effect plugin. The compressed version of rellax.js is only 871 bytes. In small screen devices such as mobile phones, the plug-in will automatically limit the visual difference characteristics.

13. Dynamics.js

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

dynamics.js is a Javascript library that can create physics-based CSS animations.

14. mo.js

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

Mo.js is a "simple and efficient" graphic animation library with smooth animation and amazing user experience. On any device, the screen density independent effect is very good. You can draw built-in shapes or custom shapes, whatever you want , As long as you like, you can also draw multiple animations, and then connect them in series, not to say more details, please visit the official website of Mo.js

15. Reveal.js

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

The advantage of Reveal.js for PPT is that you can use the markdown language to write static text directly, and you can add interactive animations supported by various html languages, and then directly convert it into PPT by Pandoc. The disadvantage is that it is not flexible enough to operate on a single HTML element when using markdown.

This guide will record some experience and lessons of using Reveal.js to do PPT. For simplicity, I will try my best to use Markdown for static pages, and use p5js for the animation presentation.

16. Animsition

github: https://github.com/blivesta/animsition

17. SVG Mesh 3d

github: https://github.com/mattdesl/svg-mesh-3d

An advanced module that converts SVG strings into 3D triangular meshes. Most suitable for silhouettes, such as font icons SVG.

18. Zdog

github: https://github.com/metafizzy/zdog

zdog is a circular, flat, designer-friendly pseudo 3D engine. Through this library, pseudo 3D elements can be created without knowing geometry or algebra to create geometric figures. .

~End, I’m Shuwanzhi. The finishing of this article is Beijing time: 2021/09/22 noon: 12:35, I’m going to do the dishes, see you in the next issue~

---

possible bugs in 1615cf51c101f1 editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo

comminicate

The article is continuously updated every week, you can search on [Daily Move World] Read it for the first time, reply [Benefit] are many front-end videos waiting for you, this article GitHub https://github.com/qq449245884/xiaozhi has been included, welcome to Star.