仿知乎登录页面 - zhihu-particle

2017-04-05      146      JavaScript
项目简介

Zhihu-Particle

简介

由于群友的号召,清明时节得空,所以仿 知乎登录 页面,基于canvas实现了一个粒子(Particle)随机运动的动画效果。

安装

npm i zhihu-particle --save #使用npm安装
yarn add zhihu-particle #使用yarn安装

基本使用

在CommonJS环境下:

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

简单来说,在CommonJS下引入Particle类后,传入一个DOM节点作为第一个参数即可完成创建,一句话实现知乎效果。

API说明

import Particle from 'zhihu-particle'; //Particle为当前库的Class, 可用于多次实例化
    new Particle(<Html Dom Element>,<ParticleOption>);

Html Dom Element

当前参数为即将插入的Html Dom容器,或简单来说可以认为是一个Div。例如

document.getElementById('#canvasWrapper');

为了可拓展,Zhihu-Particle所创建的canvas会插入指定的Div中, canvas的大小会自动跟随该Div大小变化而变化,所以指定的Div请自行设置大小 。 这样做的目的是可以让用户更加自定义的选择动画区域而不必全屏,同时也自动实现了响应式。

ParticleOption

当前参数为粒子选项,可选,有默认的配置。

context属性 类型 例子 说明
atomColor string #eeeeee 原子颜色,默认值为#E4E5E6
interactive boolean true 是否允许鼠标点击交互,默认值为true
density number或string medium 密度,取值范围为1000~50000,low,high,medium。
这里可以理解成atoms数量=canvas宽*canvas高/密度。
这样的设计是为了在全站响应式的情况下,小屏幕会生成相应少的原子,大屏幕则会生成较多的原子,所以更符合日常需求。
velocity number或string .8 原子移动速度,取值范围为0~1,fast,slow,none,medium,默认为medium

效果图

兼容性

任何支持Canvas的浏览器,如常见的:

IE9+

Firefox

Chrome

Safari