html dom 知乎,知乎登录页 - 粒子运动效果

简介

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

Demo

Demo源码

独立包

安装 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

当前参数为即将插入的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

number或string

medium

密度,取值范围为1000~50000, low, high, medium。

这里可以理解成atoms数量=canvas宽*canvas高/密度。

这样的设计是为了在全站响应式的情况下,小屏幕会生成相应少的原子,大屏幕则会生成较多的原子,所以更符合日常需求。

velocity

number或string

.8

原子移动速度,取值范围为0~1,fast,slow,none,medium,默认为medium

效果图

44cdef3dadb0dec89386f772c4e091f4.gif

兼容性

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

IE9+

Firefox

Chrome

Safari

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

alm系统的使用流程_支持MBSE的企业信息管理系统发展与启示

导读:本文介绍了模型管理与MBSE、产品生命周期管理(PLM)的概念及其之间的关系,分析了不同行业的模型管理现状,提出了模型管理的解决方案与技术方向,最后给出了建设企业信息管理系统的建议,以期为企业信息管理系统支持M…

如何快速部署一个Elasticsearch集群?

作者:无敌码农 来源:无敌码农今天的文章给大家介绍下Elasticsearch这一目前在“搜索”和“分析”领域使用十分广泛的技术组件。并演示如何快速构建一个Elasticsearch集群。Elasticsearch概述Elasticsearch是一款非常强大的开源“搜索”及“分析”引擎。除…

对话阿里云李飞飞:下一代企业级数据库6大技术方向

简介: 对话李飞飞,不仅仅是一次简单的采访,对老鱼来说,也是一种收获,因为,在数据库领域李飞飞拥有敏锐的触角,对数据库发展趋势有着独到的见解和洞察。 题图:DTCC 2020大会专访合影&…

云企业网CEN-TR打造企业级私有网络

简介: 为了满足企业大规模、多样化的组网和网络管理需求,云企业网(CEN)提出了转发路由器TR(Transit Router)的概念。在每个地域内创建一个转发路由器,可以连接大量VPC、VBR,作为您在…

孩子不念书了学计算机,李玫瑾教授:孩子是不是学习的料不用等长大,上幼儿园就能看出来...

读书是通往成功的一个捷径,但却并非所有人都能走这个捷径。虽然家长都不信,也不想相信,但有些孩子就是不适合学习,如果走一些其他的路可能还会有不一样的人生,但要是在学习这一条路上一条走到黑,未来一定不…

这个数据仓库,竟然把淘宝和京东干翻了。。

守着金山讨饭吃,乍听有些不可思议,但不少企业正遭遇这样的窘况。大数据被誉为“新石油”,如何管理并洞悉数据的价值,是企业未来发展的核心竞争力。进入大数据时代,数据规模与日俱增。另一方面,数据仓库的市…

ios 构建版本一直在处理中_iOS构建版本不显示

我今天用Xcode8上传项目时,发现最后的构建版本那一步始终不会显示加号按钮,搞了我一个多小时,最后终于按照网上所说,是权限问题,比如相机权限、相册权限、地图、蓝牙等,一般而言,相机和相册权限…

如何做好性能压测丨压测环境设计和搭建

简介:一般来说,保证执行性能压测的环境和生产环境高度一致是执行一次有效性能压测的首要原则。有时候,即便是压测环境和生产环境有很细微的差别,都有可能导致整个压测活动评测出来的结果不准确。 一般来说,保证执行性能…

疫情之下的科技普惠:阿里云科技驱动中小企业数字化

2020 年到2021年,一场疫情给全球经济发展带来了重创。在受到疫情影响之时,各行各业尽展众相,一些企业进行着自我变革;一些企业还未来得及自救,却已被淘汰。更受疫情冲击的,是各行各业中的中小型企业&#x…

python循环语句while的格式_Python循环语句之while循环22

一,循环机制及应用场景1.while循环用于编写通用迭代结构(非遍历);顶端测试为真即会执行循环体,并会重复多次测试直到为假后执行循环后的其他语句。2.for循环一个通用的序列迭代器,用于遍历任何有序的序列对象内的元素;…

吴老师用计算机输入一份稿件,分数乘除法易错题复习1.pdf

分数乘除法易错题精选班级 姓名 家长签名一、填空1 4 2 5 31. 小时 ( )分 米 ( )厘米 ( ) m 公顷 吨 ( )3 25 8 8千克2 ( )2. 把 米平均分成 4 份 ,每份占全长的 ,每份是 ( )米 .15 ( )33. 男生人数比女生人数少 ,表示把( )看作单位 1,平均分…

一则有趣的机场广告

作者:小枣君来源:鲜枣课堂前几天路过深圳宝安机场时,有一个大屏广告,成功地吸引了我的注意。我把它拍了下来,如图所示。广告中,一位商务人士从胸前口袋里,掏出了一个银灰色的小盒子。广告语写着…

3+1保障:高可用系统稳定性是如何炼成的?

简介: 影响系统稳定性的架构设计有哪些?一个可持续保障的研发运维流程机制是怎样的?如何培养团队技术人员的意识和能力?本文作者以团队技术负责人的视角,从三大技术要素和一个业务要素,分享在稳定性建设上的…

什么叫做石英表_石英表 是什么意思??

展开全部石英表是腕表种类之一,英文是e5a48de588b63231313335323631343130323136353331333431356638quartz watch。 将石英晶体运用在钟表上是一种现代的发明,第一只石英表在1969年首度出现。在这一年,日本的精工公司发现了如何将石英制成音叉…

从KPI到OKR,高阶产品人如何推动业务高速增长

简介: 不管是核心大目标,还是O(Objectives),或者北极星指标,奇妙等式等等,最后都需要核心组织协同方式来推动整个目标聚焦以及过程的落地。 作为产品经理人,相信很多人都遇到过以下的…

有没有五金产品展开计算机软件,花样算法猫腻不断 全屋定制这本账真心不好算...

花样算法猫腻不断 全屋定制这本账真心不好算人民网2017-03-14 09:50[摘要]选材差不多、尺寸也差不多,在不同定制品牌之间,不要说终的产品价格相差多少,就光中间的计价过程估计就能让人头疼好一阵子了。说到定制家具产品的账要怎么算。有过消费…

从Hadoop到云原生,谈如何消除程序员35岁危机

作者:小智 来源:智领云科技前言35岁这个“职场枯荣线”,确实真实存在。不知从何时起,很多企业将入职门槛限定在35岁以下,“35岁”已然成为职场中年的魔咒。尤其是程序员这个群体,年龄绝对是最难以隐忍的痛点…

Serverless Kubernetes:理想,现实与未来

简介: 当前 Serverless 容器的行业趋势如何?有哪些应用价值?如果 Kubernetes 天生长在云上,它的架构应该如何设计?Serverless 容器需要哪些基础设施?阿里云容器服务产品负责人易立及阿里云 Serverless Kube…

龙卷风路径_龙卷风接连来袭 我国哪些地方最易发生强龙卷?

中国天气网讯 近日(13-14日),天津静海、山东东营、潍坊等地接连遭遇龙卷风袭击,造成部分房屋、农业设施和电力设施被毁。夏季龙卷风多发吗?哪些地区龙卷风多发?龙卷风发生有何征兆?如何避险?龙卷风夏季易发…

三类计算机语言及特点,计算机语言分为哪三类,计算机语言有哪些

Q7:有哪些计算机语言是由华人主导或参与设计的?他是PHP届的一哥,PHP NG(下一代语言)核心开发者,PHP5.4,5.5 主要开发者,php7主导开发者,大家都叫他鸟哥。注意不是《鸟哥私房菜》系列那个鸟哥&am…