Introduction to the

Due to the call of the group of friends, qingming festival is empty, so the login page of Zhihu is imitated to realize the animation effect of a Particle moving randomly based on canvas.

Demo

Zhihu Particle Demo

The Demo source code

React Demo source know huhu Vue Demo source Inferno Demo source – For Fun Only

Independent package

react-particle  

The installation

NPM I ZHIhu -particle --save #Copy the code
Yarn add ZHIhu - Particle # Install using YARNCopy the code

The basic use

In CommonJS environment:

    import Particle from 'zhihu-particle';
    new Particle(document.getElementById('canvas-wrapper'));Copy the code

Create a DOM node as the first parameter in the CommonJS class.

API specification

import Particle from 'zhihu-particle'; //Particle is the Class of the current library, which can be used to instantiate new Particle(<Html Dom Element>,<ParticleOption>) multiple times;Copy the code

Html Dom Element

The current argument is the Html Dom container to be inserted, or simply a Div. For example,

    document.getElementById('#canvasWrapper');Copy the code

In order to expand, the canvas created by Zhihu-Particle will be inserted into the specified Div. The size of the canvas will automatically change with the size of the Div. Therefore, please set the size of the specified Div by yourself. The purpose of this is to allow the user to more customise the selection of animation areas without having to go full screen, and also automatically achieve responsiveness. See React Demo for details.

ParticleOption

The current parameter is particle option, which is optional and has default configuration.

The context properties type example instructions
atomColor string #eeeeee Atomic color, default value is#E4E5E6
interactive boolean true Whether to allow mouse-click interaction. Default value: true
density numberorstring medium Density: the value ranges from 1000 to 50000.low.high.medium.

This can be interpreted as the number of atoms =canvas width *canvas height/density.

This is designed so that in the case of full site response, the small screen will generate fewer atoms and the large screen will generate more atoms, so it is more suitable for everyday needs.
velocity numberorstring 8. Atomic movement velocity, ranging from 0 to 1,fast.slow.none.mediumBy default,medium

rendering

compatibility

Any browser that supports Canvas, as usual:

IE9+

Firefox

Chrome

Safari