rudism/spooky.js
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Wiki Activity

0.0.2

Browse source
This commit is contained in:
Rudis Muiznieks 2020-06-14 14:25:44 -05:00
parent 912cbac798
commit 0c803bf677
2 changed files with 48 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/CRT.ts
View file

@ -48,7 +48,7 @@ export class CRT implements IEffect {
#${this.wrapperId} {
position: relative;
}
#${this.containerId}::before {
#${this.wrapperId} > #${this.containerId}::before {
content: " ";
display: block;
position: absolute;
@ -70,7 +70,7 @@ export class CRT implements IEffect {
pointer-events: none;
}
${this.makeFlickerFrames()}
#${this.containerId}::after {
#${this.wrapperId} > #${this.containerId}::after {
content: " ";
display: block;
position: absolute;
@ -85,7 +85,7 @@ export class CRT implements IEffect {
animation: flicker_${this.styleId} 0.15s infinite;
}
${this.makeSeparationFrames()}
#${this.containerId} {
#${this.wrapperId} > #${this.containerId} {
animation: separation_${this.styleId} 1.6s infinite;
}
`).appendTo($('body'));
@ -111,10 +111,14 @@ export class CRT implements IEffect {
}
public execute(): void {
$(`#${this.containerId}`).wrap($('<div />').attr('id', this.wrapperId));
if(!$(`#${this.wrapperId}`).length) {
$(`#${this.containerId}`).wrap($('<div />').attr('id', this.wrapperId));
}
}
public stop(): void {
$(`#${this.containerId}`).unwrap(`#${this.wrapperId}`);
if($(`#${this.wrapperId}`).length) {
$(`#${this.containerId}`).unwrap(`#${this.wrapperId}`);
}
}
}

39
test/CRT.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang='en'>
<head>
<title>CRT Test</title>
<meta charset='utf-8'>
<script src='../build/spooky.min.js'></script>
<script>
var crt;
document.addEventListener("DOMContentLoaded", function(event) {
crt = new Spooky.CRT({
containerId: 'crt',
screenDoorColor: '#040',
screenDoorSize: 4,
screenDoorOpacity: 0.5,
separationColor: '#ff0',
separationBlur: 3,
separationDistance: 8,
separationOpacity: 0.25
});
});
</script>
<style>
#crt {
padding: 2em;
background-color: #020;
color: #0f0;
font-family: monospace;
font-size: 3em;
}
</style>
</head>
<body>
<div id='crt'>
This is an old CRT monitor.
</div>
<button onclick='crt.execute()'>Start</button>
<button onclick='crt.stop()'>Stop</button>
</body>
</html>