mirror of
https://github.com/seigler/dash.party
synced 2025-07-26 17:06:09 +00:00
🎉 Initial commit
This commit is contained in:
Joshua Seigler
Joshua Seigler
commit
a4ed228a65
8 changed files with 7046 additions and 0 deletions
22
.editorconfig
Normal file
22
.editorconfig
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# http://editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package.json}]
|
||||||
|
# The indent size used in the `package.json` file cannot be changed
|
||||||
|
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
2
README.md
Normal file
2
README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
# dash.party
|
||||||
|
Website for dash.party - putting the FUN in FUNGIBILITY
|
||||||
101
confetti.js
Normal file
101
confetti.js
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
// Based off of http://stackoverflow.com/questions/16322869/trying-to-create-a-confetti-effect-in-html5-how-do-i-get-a-different-fill-color
|
||||||
|
// and http://codepen.io/linrock/pen/Amdhr
|
||||||
|
(function (global) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DEFAULT_NUM_CONFETTI = 500,
|
||||||
|
animate = window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
function (cb) {
|
||||||
|
setTimeout(callback, 1000 / 60);
|
||||||
|
};
|
||||||
|
|
||||||
|
function Canvas(element, canvas) {
|
||||||
|
this.element = element;
|
||||||
|
this.canvas = canvas;
|
||||||
|
this.context = canvas.getContext('2d');
|
||||||
|
this.width = element.offsetWidth;
|
||||||
|
this.height = element.offsetHeight;
|
||||||
|
this.setDimensions = function () {
|
||||||
|
this.width = this.element.offsetWidth;
|
||||||
|
this.height = this.element.offsetHeight;
|
||||||
|
this.canvas.width = this.width;
|
||||||
|
this.canvas.height = this.height;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
Canvas.prototype.step = function (particles, config) {
|
||||||
|
var canvas = this;
|
||||||
|
return function animator() {
|
||||||
|
if (canvas.halt) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var context = canvas.context;
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
if (config.updateState) {
|
||||||
|
config.updateState();
|
||||||
|
}
|
||||||
|
for (var i = 0; i < particles.length; i++) {
|
||||||
|
config.draw(particles[i], i);
|
||||||
|
config.updatePosition(particles[i], i);
|
||||||
|
}
|
||||||
|
if (config.batch) {
|
||||||
|
context[(config.fill) ? 'fill' : 'stroke']();
|
||||||
|
}
|
||||||
|
global.Confetti.animate(canvas.step(particles, config));
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
Canvas.prototype.destroy = function () {
|
||||||
|
var canvas = this;
|
||||||
|
window.removeEventListener('resize', canvas.setDimensions);
|
||||||
|
canvas.halt = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
function ConfettiClass(config) {
|
||||||
|
for (var prop in config) {
|
||||||
|
this[prop] = config[prop];
|
||||||
|
}
|
||||||
|
if (!config.d) {
|
||||||
|
this.d = randomFrom(10, DEFAULT_NUM_CONFETTI + 10);
|
||||||
|
}
|
||||||
|
if (!config.color) {
|
||||||
|
this.color = color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ConfettiClass.prototype.isFlakeExiting = function (canvas) {
|
||||||
|
return (this.x > canvas.width + 5 || this.x < -5 || this.y > canvas.height);
|
||||||
|
};
|
||||||
|
|
||||||
|
global.Confetti = {
|
||||||
|
DEFAULT_NUM: DEFAULT_NUM_CONFETTI,
|
||||||
|
color: color,
|
||||||
|
randomFrom: randomFrom,
|
||||||
|
animate: animate.bind(global),
|
||||||
|
createCanvas: function (element, canvas) {
|
||||||
|
var newCanvas = new Canvas(element, canvas);
|
||||||
|
window.addEventListener('resize', newCanvas.setDimensions);
|
||||||
|
newCanvas.setDimensions();
|
||||||
|
|
||||||
|
return newCanvas;
|
||||||
|
},
|
||||||
|
create: function (config) {
|
||||||
|
return new ConfettiClass(config);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function color() {
|
||||||
|
return 'rgba(' + randomFrom(0, 256) + ', ' +
|
||||||
|
randomFrom(0, 256) + ', ' +
|
||||||
|
randomFrom(0, 256) + ', ' + Math.random() + ')';
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomFrom(a, b, factor) {
|
||||||
|
if (!factor) {
|
||||||
|
factor = 1;
|
||||||
|
}
|
||||||
|
return a + (Math.floor((b - a) * Math.random() * factor) / factor);
|
||||||
|
}
|
||||||
|
})(window);
|
||||||
19
index.html
Normal file
19
index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Dash.party - putting the FUN in FUNGIBILITY</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="lodash-2.4.1.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="confetti">
|
||||||
|
<canvas></canvas>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<div class="logo">Dash Logo</div>
|
||||||
|
</main>
|
||||||
|
<script src="confetti.js"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6785
lodash-2.4.1.js
Normal file
6785
lodash-2.4.1.js
Normal file
File diff suppressed because it is too large
Load diff
4
logo.svg
Normal file
4
logo.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.222 28.222">
|
||||||
|
<circle fill="#1c75bc" cx="14.111" cy="14.111" r="14.111" />
|
||||||
|
<path fill="#fff" d="M23.644 10.444c-.038-.354-.133-.672-.284-.92-.18-.286-.403-.5-.706-.64-.287-.167-.61-.247-.99-.247H8.742l-.92 2.8h11.67l-1.845 5.642H5.974l-.92 2.8h12.948c.355 0 .745-.09 1.135-.246.397-.178.78-.39 1.134-.664.33-.258.64-.58.91-.934.264-.354.46-.71.582-1.102l1.74-5.352c.14-.392.185-.783.142-1.138 M12.43 12.958H5.514L4.61 15.56h6.935z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 500 B |
72
main.js
Normal file
72
main.js
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
/*
|
||||||
|
Starting point:
|
||||||
|
http://plnkr.co/edit/JeFlnHmj6gjo4NG3Do75
|
||||||
|
*/
|
||||||
|
|
||||||
|
var canvas = Confetti.createCanvas(
|
||||||
|
document.querySelector('.confetti'),
|
||||||
|
document.querySelector('.confetti > canvas')
|
||||||
|
);
|
||||||
|
|
||||||
|
var config = {
|
||||||
|
angle: 0.01,
|
||||||
|
tiltAngle: 0.1,
|
||||||
|
draw: draw,
|
||||||
|
updatePosition: updatePosition,
|
||||||
|
updateState: updateState
|
||||||
|
};
|
||||||
|
|
||||||
|
var particles = _.range(0, Confetti.DEFAULT_NUM).map(function () {
|
||||||
|
return Confetti.create({
|
||||||
|
x: Confetti.randomFrom(0, canvas.width),
|
||||||
|
y: Confetti.randomFrom(0, canvas.height),
|
||||||
|
r: Confetti.randomFrom(5, 30),
|
||||||
|
tilt: Confetti.randomFrom(-10, 0),
|
||||||
|
tiltAngle: 0,
|
||||||
|
tiltAngleIncrement: Confetti.randomFrom(0.05, 0.12, 100)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.step(particles, config)();
|
||||||
|
|
||||||
|
function draw(confetti) {
|
||||||
|
canvas.context.beginPath();
|
||||||
|
canvas.context.lineWidth = confetti.r / 2;
|
||||||
|
canvas.context.strokeStyle = confetti.color;
|
||||||
|
canvas.context.moveTo(confetti.x + confetti.tilt + (confetti.r / 4),
|
||||||
|
confetti.y);
|
||||||
|
canvas.context.lineTo(confetti.x + confetti.tilt, confetti.y +
|
||||||
|
confetti.tilt + (confetti.r / 4));
|
||||||
|
canvas.context.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePosition(confetti, idx) {
|
||||||
|
confetti.tiltAngle += confetti.tiltAngleIncrement;
|
||||||
|
confetti.y += (Math.cos(config.angle + confetti.d) + 1 + confetti.r / 2) / 2;
|
||||||
|
confetti.x += Math.sin(config.angle);
|
||||||
|
confetti.tilt = 15 * Math.sin(confetti.tiltAngle - idx / 3);
|
||||||
|
|
||||||
|
if (confetti.isFlakeExiting(canvas)) {
|
||||||
|
if (idx % 5 > 0 || idx % 2 === 0) {
|
||||||
|
confetti.x = Confetti.randomFrom(0, canvas.width);
|
||||||
|
confetti.y = -10;
|
||||||
|
confetti.tilt = Confetti.randomFrom(-10, 0);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if (Math.sin(config.angle) > 0) {
|
||||||
|
confetti.x = -5;
|
||||||
|
confetti.y = Confetti.randomFrom(0, canvas.height);
|
||||||
|
confetti.tilt = Confetti.randomFrom(-10, 0);
|
||||||
|
} else {
|
||||||
|
confetti.x = canvas.width + 5;
|
||||||
|
confetti.y = Confetti.randomFrom(0, canvas.height);
|
||||||
|
confetti.tilt = Confetti.randomFrom(-10, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateState() {
|
||||||
|
this.angle += 0.01;
|
||||||
|
this.tiltAngle += 0.1;
|
||||||
|
}
|
||||||
41
style.css
Normal file
41
style.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-contents: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confetti {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confetti > canvas {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
max-width: 80vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
text-indent: -100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
background-image: url(logo.svg);
|
||||||
|
padding-top: 100%;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue