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,作为您在…

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

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

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

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

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

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

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

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

一则有趣的机场广告

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

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

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

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

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

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

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

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

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

Serverless Kubernetes:理想,现实与未来

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

这只猫在云端定居了?边缘计算在天猫精灵云应用上的落地实践

IoT的概念早已飞入寻常百姓家,在你我的日常生活中发挥着“智能”作用。比如,智能家居、智慧照明、GPS 导航、手机计步器等。未来,随着用户和技术的延伸和拓展,物联网的信息交换和通信价值将会被继续放大。 那么问题来了&#xff…

Gartner发布2021年新兴技术成熟度曲线,三大新兴技术趋势主题

Gartner通过信任、增长和变革三大新兴技术趋势主题发布推动创新的关键新兴技术。需特别关注非同质化通证、量子机器学习、生成式人工智能、同态加密以及组装式应用和网络等关键技术 编辑 | 宋慧 供稿 | Gartner 头图 | 付费下载于视觉中国 根据全球领先的信息技术研究和顾问公…

如何通过数据智能玩转私域流量新生态

简介: 流量三分天下的局面,催生了私域流量的诞生。从第三方数据流量监测角度观察,2020年,以及在未来几年内,在私域流量方面会出现什么样的趋势和新机会?友盟统计分析产品总监冯成蹊,就“如何通过…

深圳入户计算机一级证加分吗,2021年深圳积分入户,哪些职称证书可以加分?...

深圳入户问题记录今年已经拿到自考本科,社保刚交一年,听说职称证书可以加分,明年打算考,请问哪些证书可以加分,容易考吗?在深圳积分入户分值项中,职称也是可以加分的。职称(Professional Title)…

Unet网络实现叶子病虫害图像分割

作者|李秋键 出品|AI科技大本营(ID:rgznai100) 智能化农业作为人工智能应用的重要领域,对较高的图像处理能力要求较高,其中图像分割作为图像处理方法在其中起着重要作用。图像分割是图像分析的关键步骤,在复杂的自然背景下进行图像分割, 难度…

阿里毕玄:提升代码能力的4段经历

简介: 对于程序员而言,我始终认为代码是展现能力的关键。一个优秀程序员写的代码,和一个普通程序员写的代码是很容易看出差别的,代码是展示程序员硬实力的名片。如何提升写代码的能力,始终是一个关键的话题&#xff0c…