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 |
number orstring |
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 |
number orstring |
8. | Atomic movement velocity, ranging from 0 to 1,fast .slow .none .medium By default,medium |
rendering
compatibility
Any browser that supports Canvas, as usual:
IE9+
Firefox
Chrome
Safari