mirror of
https://github.com/seigler/dash.party
synced 2025-07-26 00:46: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