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