A great input box effect that mimics the power-mode vscode plugin
source link: https://github.com/lindelof/power-mode-input
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
PowerModeInput
PowerModeInput can make your text input box more compelling
This project can make your input box lively. One day I saw a vscode plugin called Power Mode
, so I wanted to write a similar javascript library. This project uses proton.js
and it is also great.
By the way recommend a great react particle animation background component https://github.com/lindelof/particles-bg
Online demo
Install
npm install --save power-mode-input
Usage
import PowerModeInput from "power-mode-input"; const input = document.getElementById("obinput"); PowerModeInput.make(input); // close PowerModeInput PowerModeInput.close(input); // destroy PowerModeInput PowerModeInput.destroy(); // another usage PowerModeInput.make(".phone", { height: 5, tha: [0, 360], g: 0.5, num: 5, radius: 6, circle: true, alpha: [0.75, 0.1], color: "random" });
If you are in react
, you can use it like this
componentDidMount(){ PowerModeInput.make(this.inputRef.current); }
You can use it like this in vue.js
mounted() { PowerModeInput.make(this.$refs.inputRef); }
Of course this can be done in angular
const inputElement = this.elementRef.nativeElement.querySelector('input'); PowerModeInput.make(inputElement);
Parameter Description
PowerModeInput.make(input, { height: 5, tha: [0, 360], g: 0.5, num: 5, ... // Parameter });key describe type example
g
Whether to add gravity
number
1
num
The number of particles emitted each time
number
3
radius
The radius of every particle
number
10
alpha
The alpha of every particle
number
.1
tha
The Particle emitter angle
array
[0, 360]
v
The Particle emitter Particle velocity
number
0.5
life
The life of every particle
number
1.2
color
Particle color
array or string
#ffcccc
random
Random force
number
1.2
y
Particle emitter height
number
2
height
Particle emitter height Ibid
number
2
Explanation
For some special types of input boxes, the cursor may not be positioned correctly. I am also looking for a solution to this problem. If you know, please let me know. See here for specific reasons
Contribution
I very much hope that you can work with me to modify the code. I also have a lot of fun ideas. Maybe you can join me to implement it.
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK