rudism
/
spooky.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity
A Javascript library that uses CSS to make a website spooky.
8 Commits 1 Branch 2 Tags 58 KiB
TypeScript 91.4%
HTML 8.6%
Go to file
dependabot[bot] 94d8ea4b0e
Bump path-parse from 1.0.6 to 1.0.7 
Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
 		2021-08-12 10:16:50 +00:00
src 0.0.2 2020-06-14 15:10:57 -05:00
test 0.0.2 2020-06-14 15:10:57 -05:00
.gitignore initial commit 2020-05-09 13:06:47 -05:00
README.md added CRT effect 2020-06-14 14:25:28 -05:00
package-lock.json Bump path-parse from 1.0.6 to 1.0.7 2021-08-12 10:16:50 +00:00
package.json added CRT effect 2020-06-14 14:25:28 -05:00
tsconfig.json initial commit 2020-05-09 13:06:47 -05:00

README.md

spooky.js

Available Effects

Film Grain

Based on original code from Szenia Zadvornykh.

var fg = new Spooky.FilmGrain(options);
fg.execute();
fg.stop();

Takes optional options configuration object:

  • patternSize: dimensions of the repeating grain pattern (64)
  • alpha: transparency of the effect from 0-255 (25)
  • grainScale: x and y scale of each grain ({x: 3, y: 1})
  • refreshInterval: how often to redraw the effect
  • canvasId: optional id of an existing canvas to apply the effect to

If no existing canvasId is provided then the effect will be applied to the entire browser screen.

You can animate alpha changes with fg.setAlpha(newValue, step) where step is optional and will determine how quickly the fade in/out will occur.

CRT

Based on original code from Alec Lownes.

var crt = new Spooky.CRT({containerId: 'mydiv'});
fg.execute();
fg.stop();

Takes required options configuration object:

  • containerId: id of the element to apply the CRT effect to (required)
  • screenDoorColor: color of the screen door effect (#000000)
  • screenDoorSize: size in pixels of the screen door effect (2)
  • screenDoorOpacity: opacity of the screen door effect from 0-1 (0.25)
  • separationColor: color of the separation effect (#000000)
  • separationDistance: horizontal movement distance in pixels of the separation effect (5)
  • separationBlur: blur size in pixels of the separation effect (1)
  • separationOpacity: opacity of the separation effect from 0-1 (0.5)