1
0

👽🕋 Checkpoint

./confetti.js:7435365/2847
./script.js:7435365/4233
./index.html:7435365/336
./style.css:7435365/767
This commit is contained in:
Glitch (hello-webpage) 2019-10-06 19:14:50 +00:00
parent e44cd7b3ad
commit e78507a7cc
4 changed files with 58 additions and 31 deletions

1
confetti.js Normal file
View 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})}}}});

View File

@ -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="#">&pi;</a>
</body>
</html>

View File

@ -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);

View File

@ -31,6 +31,23 @@ body {
font-size: 16vw;
}
#pilink {
position: fixed;
bottom: 1vw;
right: 1vw;
font-family: 'Times New Roman', serif;
font-size: 1.2vw;
}
#pilink a {
text-decoration: none;
color: #6e7f80;
}
#pilink a:hover {
color: #FF0000;
}
p.nope {
color: #888888;
}