npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zhihu-particle

v0.0.9

Published

A canvas particle animation effect dirived from ZHIHU website

Downloads

125

Readme

Zhihu-Particle

NPM

简介

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

Demo

知乎Particle Demo

Demo源码

知乎React Demo源码 知乎Vue Demo源码 知乎Inferno Demo源码 - For Fun Only

安装

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请自行设置大小。 这样做的目的是可以让用户更加自定义的选择动画区域而不必全屏,同时也自动实现了响应式。详细可以参考本库的知乎React Demo

ParticleOption

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

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

效果图

zhihu-particle

兼容性

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

IE9+

Firefox

Chrome

Safari