This repository has been archived by the owner on Nov 2, 2017. It is now read-only.
forked from muan/confetti
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
76 lines (68 loc) · 2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<meta charset='utf-8'>
<body>
<script type="text/javascript">
var ipc = require('electron').ipcRenderer
var countdown
ipc.on('start-countdown', startCountdown)
ipc.on('stop-countdown', stopCountdown)
function startCountdown () {
document.body.classList.add('fadeout')
countdown = setTimeout(function () {
document.body.classList.remove('fadeout')
ipc.send('abort')
}, 4000)
}
function stopCountdown () {
document.body.classList.remove('fadeout')
clearTimeout(countdown)
}
document.body.innerHTML = ""
var colors = ['#0074D9', '#7FDBFF', '#39CCCC', '#3D9970', '#01FF70', '#FFDC00', '#FF4136', '#B10DC9', '#DDDDDD']
var degrees = [30, 45, 60, 70, 115, 160]
for (i = 0; i < 250; i++) {
var confetti = document.createElement("div")
confetti.classList.add("bit")
confetti.style.left = Math.random() * document.body.clientWidth + 'px'
confetti.style.top = Math.random() * document.body.clientHeight + 'px'
confetti.style.backgroundColor = colors[i % colors.length]
confetti.style.transform = 'skewY(20deg) rotate(' + degrees[i % degrees.length] + 'deg)'
confetti.style.animation = 'fall ' + Math.random() * 20 + 5 + 's linear infinite'
confetti.style.boxShadow = '50px -100px 0 0 white'
if (Math.random() * 10 % 3 == 1) confetti.style.zIndex = -1
document.body.appendChild(confetti)
}
</script>
<style type="text/css">
body {
opacity: 1;
color: white;
text-align: center;
font-size: 60px;
font-family: monospace;
padding: 25% 0;
transition: none;
text-shadow: 0 0 2px black, 0 0 2px black;
}
.fadeout {
transition: opacity 1s 3s;
opacity: 0;
}
.bit {
position: absolute;
width: 10px;
height: 3px;
background: red;
}
@keyframes fall {
0% { margin-top: -50%; }
100% { margin-top: 100%; box-shadow: 200px 0px 0 0 white; }
}
@keyframes fadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>
<div class="confetti">
You’re awesome!
</div>
</body>