parent
5689be418e
commit
0429563f75
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,9 @@
|
|||||||
|
#confetti {
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
let W = window.innerWidth;
|
||||||
|
let H = document.getElementById('confetti').clientHeight;
|
||||||
|
const canvas = document.getElementById('confetti');
|
||||||
|
const context = canvas.getContext("2d");
|
||||||
|
const maxConfettis = 25;
|
||||||
|
const particles = [];
|
||||||
|
|
||||||
|
const possibleColors = [
|
||||||
|
"#ff7336",
|
||||||
|
"#f9e038",
|
||||||
|
"#02cca4",
|
||||||
|
"#383082",
|
||||||
|
"#fed3f5",
|
||||||
|
"#b1245a",
|
||||||
|
"#f2733f"
|
||||||
|
];
|
||||||
|
|
||||||
|
function randomFromTo(from, to) {
|
||||||
|
return Math.floor(Math.random() * (to - from + 1) + from);
|
||||||
|
}
|
||||||
|
|
||||||
|
function confettiParticle() {
|
||||||
|
this.x = Math.random() * W; // x
|
||||||
|
this.y = Math.random() * H - H; // y
|
||||||
|
this.r = randomFromTo(11, 33); // radius
|
||||||
|
this.d = Math.random() * maxConfettis + 11;
|
||||||
|
this.color =
|
||||||
|
possibleColors[Math.floor(Math.random() * possibleColors.length)];
|
||||||
|
this.tilt = Math.floor(Math.random() * 33) - 11;
|
||||||
|
this.tiltAngleIncremental = Math.random() * 0.07 + 0.05;
|
||||||
|
this.tiltAngle = 0;
|
||||||
|
|
||||||
|
this.draw = function() {
|
||||||
|
context.beginPath();
|
||||||
|
context.lineWidth = this.r / 2;
|
||||||
|
context.strokeStyle = this.color;
|
||||||
|
context.moveTo(this.x + this.tilt + this.r / 3, this.y);
|
||||||
|
context.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 5);
|
||||||
|
return context.stroke();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function Draw() {
|
||||||
|
const results = [];
|
||||||
|
|
||||||
|
// Magical recursive functional love
|
||||||
|
requestAnimationFrame(Draw);
|
||||||
|
|
||||||
|
context.clearRect(0, 0, W, window.innerHeight);
|
||||||
|
|
||||||
|
for (var i = 0; i < maxConfettis; i++) {
|
||||||
|
results.push(particles[i].draw());
|
||||||
|
}
|
||||||
|
|
||||||
|
let particle = {};
|
||||||
|
let remainingFlakes = 0;
|
||||||
|
for (var i = 0; i < maxConfettis; i++) {
|
||||||
|
particle = particles[i];
|
||||||
|
|
||||||
|
particle.tiltAngle += particle.tiltAngleIncremental;
|
||||||
|
particle.y += (Math.cos(particle.d) + 3 + particle.r / 2) / 2;
|
||||||
|
particle.tilt = Math.sin(particle.tiltAngle - i / 3) * 15;
|
||||||
|
|
||||||
|
if (particle.y <= H) remainingFlakes++;
|
||||||
|
|
||||||
|
// If a confetti has fluttered out of view,
|
||||||
|
// bring it back to above the viewport and let if re-fall.
|
||||||
|
if (particle.x > W + 30 || particle.x < -30 || particle.y > H) {
|
||||||
|
particle.x = Math.random() * W;
|
||||||
|
particle.y = -30;
|
||||||
|
particle.tilt = Math.floor(Math.random() * 10) - 20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener(
|
||||||
|
"resize",
|
||||||
|
function() {
|
||||||
|
W = window.innerWidth;
|
||||||
|
H = window.innerHeight;
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// Push new confetti objects to `particles[]`
|
||||||
|
for (var i = 0; i < maxConfettis; i++) {
|
||||||
|
particles.push(new confettiParticle());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
canvas.width = W;
|
||||||
|
canvas.height = H;
|
||||||
|
Draw();
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Maths'Educ</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="css/global.css">
|
||||||
|
</head>
|
||||||
|
<body id="bodyStyle">
|
||||||
|
<div class="fs-1 text-light text-center mt-5">
|
||||||
|
ERROR 404 - Page not found
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue