add button confetti
parent
a00e2cb9bb
commit
b0c9094f13
|
@ -0,0 +1,21 @@
|
||||||
|
@keyframes bang {
|
||||||
|
from {
|
||||||
|
transform: translate3d(0,0,0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.btn-confetti {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 8px;
|
||||||
|
background: red;
|
||||||
|
animation: bang 700ms ease-out forwards;
|
||||||
|
opacity: 0
|
||||||
|
}
|
|
@ -0,0 +1,22 @@
|
||||||
|
for (const btn of document.getElementsByTagName('button')) {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
function random(max){
|
||||||
|
return Math.random() * (max - 0) + 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
const c = document.createElement('i');
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
const styles = 'transform: translate3d(' + (random(500) - 250) + 'px, ' + (random(200) - 150) + 'px, 0) rotate(' + random(360) + 'deg);\
|
||||||
|
background: hsla('+random(360)+',100%,50%,1)'
|
||||||
|
|
||||||
|
const e = document.createElement("i");
|
||||||
|
e.style.cssText = styles.toString();
|
||||||
|
e.classList.add('btn-confetti')
|
||||||
|
c.appendChild(e);
|
||||||
|
}
|
||||||
|
btn.appendChild(c);
|
||||||
|
setTimeout(function() {
|
||||||
|
btn.removeChild(c)
|
||||||
|
}, 700)
|
||||||
|
})
|
||||||
|
}
|
|
@ -43,6 +43,11 @@
|
||||||
<script defer src="{{'events/homoween/js/jumpscare.js' | asset}}"></script>
|
<script defer src="{{'events/homoween/js/jumpscare.js' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if IS_BDAY() and not (v and v.poor) %}
|
||||||
|
<link rel="stylesheet" href="{{('events/bday/css/btn-confetti.css') | asset}}">
|
||||||
|
<script defer src="{{'events/bday/js/btn-confetti.js' | asset}}"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<input hidden id="gnonce" value="{{g.nonce}}">
|
<input hidden id="gnonce" value="{{g.nonce}}">
|
||||||
<input hidden id="gbrowser" value="{{g.browser}}">
|
<input hidden id="gbrowser" value="{{g.browser}}">
|
||||||
<input hidden id="IMAGE_FORMATS" value="{{IMAGE_FORMATS}}">
|
<input hidden id="IMAGE_FORMATS" value="{{IMAGE_FORMATS}}">
|
||||||
|
|
Loading…
Reference in New Issue