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
效果图
兼容性
任何支持Canvas的浏览器,如常见的:
IE9+
Firefox
Chrome
Safari
html dom 知乎,知乎登录页 - 粒子运动效果相关推荐
- vue3项目实战---知乎日报----登录页
目录 网络请求 vuex 封装标题栏 登录页 网络请求 poist请求通过body主体发送 (对象)默认json 其他格式在transformRequest中配置 每次发送请求 携带token axi ...
- android动画知乎,GitHub - ryanhoo/Zhihu-Parallax-Animation: 知乎 Android 客户端启动页的视差动画效果实现...
Parallax Animation 知乎 Android 客户端启动页的视差动画效果实现 Blog Declaration 项目中图片等素材均取自于知乎 Android 客户端,仅作学习交流之用,请 ...
- android动画知乎,Android模仿知乎的回答详情页的动画效果
废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果 在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限, ...
- 【凯子哥带你夯实应用层】都说“知乎”逼格高,我们来实现“知乎”回答详情页动画效果
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 2014已经远去,2015年的目标很简单,就是继续熟悉Android的上层API,虽然偶尔会为了某个问题去研 ...
- 实现知乎 Android 客户端启动页视差滚动效果
http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen ...
- Flutter Web(一)新建项目和登录页
flutter开发环境搭建略 如果是新搭建好的环境,需要开启web支持和windows支持 flutter config --enable-windows-desktop flutter config ...
- CAS—修改默认登录页
1. 部署CAS-Server 本文以cas-server-3.4.11-release.zip为例,解压提取cas-server-3.4.11/modules/cas-server-webapp- ...
- 【项目记录/vue移动端】仿京东到家登录页
3-1 登陆页面布局开发 视口(Viewport) 目的:让手机的小屏幕尽可能完整显示整个网页,即实现理想视口 1)布局视口layout viewport iOS, Android 都将布局视口分辨率 ...
- 知+是什么,知乎知+怎么开通?
一.什么是知乎知+ 据知乎营销介绍,知+是帮助企业和个人创作者的内容高效创作与加速流通工具.凭借高质量内容融入用户需求场景,高效获得知乎[内容可信赖][传播更持久]的平台赋能. 二.知+适用投放场景 ...
最新文章
- 表单标签form、label、input、textarea、select
- 提高大数据量并发访问时效率
- python3 异常嵌套
- 烂泥:python2.7和python3.5源码安装
- python collections模块(数据结构常用模块)计数器Counter 双向队列deque 默认字典defaultdict 有序字典OrderedDict 可命名元组namedtuple
- Spring初学(一)
- SBT模版(Size Balanced Tree)
- 1560F1. Nearest Beautiful Number (easy version)
- 屌丝就爱尝鲜头——java8初体验
- wps vba模块压缩包_01_创建第一个VBA小程序:你好,世界
- 单例模式Java的七种写法
- 花书+吴恩达深度学习(三)反向传播算法 Back Propagation
- Kettle Spoon 安装配置详解
- 传感器实验——超声波避障小车
- [优化算法] 拉丁超立方采样与基于优化的均匀采样
- 辞职专心造火箭,贝佐斯能追上马斯克吗?
- linux鼠标手势,Vivaldi 1.2 发布,定制鼠标手势
- C#-Event事件
- Debain查看ip地址
- Gin简单明了的教程---上