👽🕋 Checkpoint
./confetti.js:7435365/2847 ./script.js:7435365/4233 ./index.html:7435365/336 ./style.css:7435365/767
This commit is contained in:
parent
e44cd7b3ad
commit
e78507a7cc
1
confetti.js
Normal file
1
confetti.js
Normal file
@ -0,0 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ConfettiGenerator=t()}(this,function(){"use strict";return function(e){var i={target:"confetti-holder",max:80,size:1,animate:!0,props:["circle","square","triangle","line"],colors:[[165,104,246],[230,61,135],[0,199,228],[253,214,126]],clock:25,interval:null,rotate:!1,width:window.innerWidth,height:window.innerHeight};e&&(e.target&&(i.target=e.target),e.max&&(i.max=e.max),e.size&&(i.size=e.size),null!=e.animate&&(i.animate=e.animate),e.props&&(i.props=e.props),e.colors&&(i.colors=e.colors),e.clock&&(i.clock=e.clock),e.width&&(i.width=e.width),e.height&&(i.height=e.height),null!=e.rotate&&(i.rotate=e.rotate));var t=document.getElementById(i.target),a=t.getContext("2d"),r=[];function o(e,t){e||(e=1);var r=Math.random()*e;return t?Math.floor(r):r}var n=i.props.reduce(function(e,t){return e+(t.weight||1)},0);function s(){var e=i.props[function(){for(var e=Math.random()*n,t=0;t<i.props.length;++t){var r=i.props[t].weight||1;if(e<r)return t;e-=r}}()];return{prop:e.type?e.type:e,x:o(i.width),y:o(i.height),src:e.src,radius:o(4)+1,size:e.size,rotate:i.rotate,line:Math.floor(o(65)-30),angles:[o(10,!0)+2,o(10,!0)+2,o(10,!0)+2,o(10,!0)+2],color:i.colors[o(i.colors.length,!0)],rotation:o(360,!0)*Math.PI/180,speed:o(i.clock/7)+i.clock/30}}function l(e){switch(a.fillStyle=a.strokeStyle="rgba("+e.color+", "+(3<e.radius?.8:.4)+")",a.beginPath(),e.prop){case"circle":a.moveTo(e.x,e.y),a.arc(e.x,e.y,e.radius*i.size,0,2*Math.PI,!0),a.fill();break;case"triangle":a.moveTo(e.x,e.y),a.lineTo(e.x+e.angles[0]*i.size,e.y+e.angles[1]*i.size),a.lineTo(e.x+e.angles[2]*i.size,e.y+e.angles[3]*i.size),a.closePath(),a.fill();break;case"line":a.moveTo(e.x,e.y),a.lineTo(e.x+e.line*i.size,e.y+5*e.radius),a.lineWidth=2*i.size,a.stroke();break;case"square":a.save(),a.translate(e.x+15,e.y+5),a.rotate(e.rotation),a.fillRect(-15*i.size,-5*i.size,15*i.size,5*i.size),a.restore();break;case"svg":a.save();var t=new Image;t.src=e.src;var r=e.size||15;a.translate(e.x+r/2,e.y+r/2),e.rotate&&a.rotate(e.rotation),a.drawImage(t,-r/2*i.size,-r/2*i.size,r*i.size,r*i.size),a.restore()}}return{render:function(){t.width=i.width,t.height=i.height,r=[];for(var e=0;e<i.max;e++)r.push(s());return requestAnimationFrame(function e(){for(var t in a.clearRect(0,0,i.width,i.height),r)l(r[t]);!function(){for(var e=0;e<i.max;e++){var t=r[e];i.animate&&(t.y+=t.speed),t.rotate&&(t.rotation+=t.speed/35),(0<=t.speed&&i.height<t.y||t.speed<0&&t.y<0)&&(r[e]=t,r[e].x=o(i.width,!0),r[e].y=t.speed<0?parseFloat(i.height):-10)}}(),i.animate&&requestAnimationFrame(e)})},clear:function(){i.animate=!1,clearInterval(i.interval),requestAnimationFrame(function(){a.clearRect(0,0,t.width,t.height);var e=t.width;t.width=1,t.width=e})}}}});
|
@ -21,7 +21,9 @@
|
||||
<p id="isit"></p>
|
||||
</div>
|
||||
|
||||
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
|
||||
<div class="glitchButton" style="position:fixed; top:1vw; right:1vw;"></div>
|
||||
<script src="https://button.glitch.me/button.js"></script>
|
||||
|
||||
<a id="pilink" href="#">π</a>
|
||||
</body>
|
||||
</html>
|
||||
|
67
script.js
67
script.js
@ -1,48 +1,49 @@
|
||||
var birthday = {
|
||||
now: null,
|
||||
day: 25,
|
||||
month: 6, // June
|
||||
month: 6, // June
|
||||
match: false,
|
||||
check: function() {
|
||||
this.now = new Date();
|
||||
if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month) this.activate()
|
||||
else this.deactivate()
|
||||
if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month)
|
||||
this.activate();
|
||||
else this.deactivate();
|
||||
},
|
||||
activate: function() {
|
||||
document.getElementById('isit').innerHTML = "Yes!"
|
||||
elementClass.remove(document.getElementById('isit'), 'nope')
|
||||
elementClass.add(document.getElementById('isit'), 'yep')
|
||||
document.getElementById("isit").innerHTML = "Yes!";
|
||||
elementClass.remove(document.getElementById("isit"), "nope");
|
||||
elementClass.add(document.getElementById("isit"), "yep");
|
||||
confetti.render();
|
||||
},
|
||||
deactivate: function() {
|
||||
document.getElementById('isit').innerHTML = "No"
|
||||
elementClass.remove(document.getElementById('isit'), 'yep')
|
||||
elementClass.add(document.getElementById('isit'), 'nope')
|
||||
document.getElementById("isit").innerHTML = "No";
|
||||
elementClass.remove(document.getElementById("isit"), "yep");
|
||||
elementClass.add(document.getElementById("isit"), "nope");
|
||||
|
||||
confetti.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var confetti = {
|
||||
displayed: false,
|
||||
confetti: null,
|
||||
target: 'confetti-holder',
|
||||
target: "confetti-holder",
|
||||
max: null,
|
||||
size: 1,
|
||||
animate: true,
|
||||
props: ['circle', 'square', 'triangle', 'line'],
|
||||
colors: [[165,104,246], [230,61,135], [0,199,228], [253,214,126]],
|
||||
props: ["circle", "square", "triangle", "line"],
|
||||
colors: [[165, 104, 246], [230, 61, 135], [0, 199, 228], [253, 214, 126]],
|
||||
clock: 25,
|
||||
rotate: true,
|
||||
width: null,
|
||||
height: null,
|
||||
render: function() {
|
||||
this.width = window.innerWidth
|
||||
this.height = window.innerHeight
|
||||
this.max = Math.floor(this.width * this.height / 1799.04)
|
||||
this.width = window.innerWidth;
|
||||
this.height = window.innerHeight;
|
||||
this.max = Math.floor((this.width * this.height) / 1799.04);
|
||||
if (this.confetti) this.confetti.clear();
|
||||
|
||||
this.confetti = new ConfettiGenerator(this)
|
||||
this.confetti = new ConfettiGenerator(this);
|
||||
this.confetti.render();
|
||||
this.displayed = true;
|
||||
},
|
||||
@ -52,31 +53,37 @@ var confetti = {
|
||||
this.confetti.clear();
|
||||
this.displayed = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var elementClass = {
|
||||
has: function(e, c) {
|
||||
return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)'));
|
||||
return !!e.className.match(new RegExp("(\\s|^)" + c + "(\\s|$)"));
|
||||
},
|
||||
add: function(e, c) {
|
||||
if (!this.has(e,c)) e.className += " " + c;
|
||||
if (!this.has(e, c)) e.className += " " + c;
|
||||
},
|
||||
remove: function(e, c) {
|
||||
if (this.has(e,c)) {
|
||||
var r = new RegExp('(\\s|^)' + c + '(\\s|$)');
|
||||
e.className=e.className.replace(r, ' ');
|
||||
if (this.has(e, c)) {
|
||||
var r = new RegExp("(\\s|^)" + c + "(\\s|$)");
|
||||
e.className = e.className.replace(r, " ");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
birthday.check();
|
||||
|
||||
document.getElementById('pilink')
|
||||
};
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
if (confetti.displayed) confetti.render();
|
||||
}, false);
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
function() {
|
||||
if (confetti.displayed) confetti.render();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
window.setInterval(function(){
|
||||
window.setInterval(function() {
|
||||
birthday.check();
|
||||
}, 5000);
|
||||
}, 5000);
|
Loading…
Reference in New Issue
Block a user