🎥 Youtube Demo : https://www.youtube.com/watch?v=eVliGZLmwks&feature=youtu.be
NPM : https://www.npmjs.com/package/scatter-letters
This project was created with inspiration from watching Interactive Developer Kim Jong-min's YouTube.
new ScatterLetters(strs[,options])window.onload = () => {
new ScatterLetters("AIC DB GFJ", {
sparkLevel: 11,
comebackSpeed: 1,
mouseThickness: 15,
color: "#30e080",
flyingDotColor: "#e81831",
blankWidth: 17,
letterSpacing: 4,
fontSize: 16,
top: 310,
left: 160,
});
};Strings can contain up to 30 characters. (Alphabet, space only, converted to upper case)
All options are not required.
| Key | discription | default |
|---|---|---|
| sparkLevel | intensity of the spark that spreads when the mouse passes | 6 |
| comebackSpeed | The speed at which points spread out return | 4 |
| mouseThickness | extent to which a point is affected when the mouse passes over it | 12 |
| color | Color of immobile dots | "#000000" |
| flyingDotColor | The color of the scattered dots. It changes slightly to the basic color. | "#00FF00" |
| blankWidth | Blank Width | 10 |
| letterSpacing | Letter Spacing | 3 |
| fontSize | Font Size | 20 |
| top | Margin Top | 0 |
| left | Margin Left | 0 |