By Chimezie Enyinnaya

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Code…

1. Lottie-Web/Bodymovin

Github address: github.com/airbnb/lott…

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

Example:

2. Parallax.js

Making: github.com/wagerfield/…

With this library, we can create a beautiful parallax effect that can be controlled with mouse movement and adjust the speed of moving objects.

3. Flat Surface Shader [FSS]

Making: github.com/wagerfield/…

Flat Surface Shader is a stunning 3D simulation lighting effect that can be configured to draw triangles using a Canvas based 2D context or an SVG polygon array. It also uses native Float32Arrays to store digital data for highly optimized calculations. You can adjust color parameters to preview the effect, and you can export the image.

4. Hover.css

Making: github.com/IanLunn/Hov…

Hover. CSS is a CSS3 based mouse Hover effect and animation that can be easily applied to buttons, logos and images. All of these effects require a single tag, using before and after pseudo-elements when necessary. Only modern browsers like Chrome, Firefox, and Safari are supported because of the CSS3 transitions, transitions, and animations.

5. Video.js Markers

Making: github.com/spchuang/vi…

Video. Js is a universal JS library for embedding Video players in web pages. Video.

With this plugin, you can place the necessary tags on the videos that exist on your site so that you can easily switch to the time codes we need.

6. Magic Grid

Making: github.com/e-oj/Magic-…

This library helps us create an adaptive grid where you don’t need to create a separate @media style. Just specify the container and you’re done.

7. Vue/React Content Loader

Making: github.com/egoist/vue-…

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

Vue Content Loader is the Vue implementation of the React-Content-loader.

8. React Image Gallery

Making: github.com/xiaolin/rea…

9. WebSlides

Making: github.com/webslides/W…

WebSlides is an open source HTML slide project that helps developers familiar with front-end languages quickly create beautiful slides. Each

in the page is a separate slide and requires very little CSS code decoration.

10. SVG.js

Making: github.com/svgdotjs/sv…

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

Example address: jsfiddle.net/Fuzzy/f2wbg…

11. React Motion

Making: github.com/chenglou/re…

React Motion is a React elastic animation library that uses 0 to 10 elastic parameters for animation:

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

What problems does this library solve?

For 95% of the animation component use cases, there is no need to reorder with hard-coded (write configuration to death) buffer curves and time transitions. Just set a stiffness and damping factor for your UI, and let the magic of physics take care of it. In this way, you don’t have to worry about minor issues such as interrupting the animation. It also greatly simplifies the API.

Example:

12. RELLAX

Making: github.com/dixonandmoe…

Rellax. Js is a lightweight plugin for pure JavaScript scrolling visuals. Rellax. Js is only 871 bytes compressed, and the plugin automatically limits the visual difference feature on small screen devices such as phones.

13. Dynamics.js

Making: github.com/michaelvill…

Dynamics.js is a Javascript library for creating physics-based CSS animations.

14. mo.js

github: github.com/mojs/mojs

Mo. Js is a “concise, efficient” graphic animation library, with animation and user experience, on any device, the screen density independent effect is very good, you can draw the shapes of the built-in or custom shape, literally, as long as you like, you can draw multiple animations, strung them together again, For more details, please visit mo.js official website

15. Reveal.js

Github:github.com/hakimel/rev…

The advantage of reveal.js for PPT is that it can directly write static text using Markdown language and add interactive animations supported by VARIOUS HTML languages, and then directly convert them into PPT by Pandoc. The disadvantage is that markdown is not flexible enough to work with individual HTML elements.

This guide will document some of the lessons learned from using reveal.js to make PPT. For simplicity, I will try to use Markdown for static pages and P5JS for animation demos.

16. Animsition

Making: github.com/blivesta/an…

17. SVG Mesh 3d

Making: github.com/mattdesl/sv…

An advanced module for converting SVG strings into 3D triangular meshes. Best for silhouette, such as the font icon SVG.

18. Zdog

Making: github.com/metafizzy/z…

Zdog is a round, flat, designer-friendly pseudo-3D engine, through this library, you can create pseudo-3D elements, no need to know geometry or algebra to create geometric shapes.

The possible bugs in editing can not be known in real time. In order to solve these bugs after the event, I spent a lot of time on log debugging. By the way, I recommend a good bug monitoring tool for youFundebug.

Original text: dev. To/kerthin / 18 -…

communication

This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.