mougnibas/projet-clicodrome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ptit flop

Browse source
This commit is contained in:
thaaoblues 2024-12-14 20:15:44 +01:00
parent 2aa25f13d3
commit a3f77dc11d
2 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
css/index.css
View file

@ -23,34 +23,31 @@
} }
/* Define keyframes for the confetti */ @keyframes PluieConfetti {
@keyframes confettiFall {
0% { 0% {
transform: translateY(-100px) rotate(0deg); transform: translateY(-100px) rotate(0deg);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translateY(100vh) rotate(720deg); transform: translateY(100vh) rotate(720deg);
opacity: 0; opacity: 0;
} }
} }
/* Confetti styles */ .confetti {
.confetti {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 20px; height: 20px;
animation: confettiFall 5s linear; animation: confettiFall 5s linear infinite;
opacity: 0; opacity: 0;
} }
/* Confetti container to spawn confetti randomly */ .confetti-container {
.confetti-container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
pointer-events: none; /* Prevent interaction */ pointer-events: none; /* pour ne pas interagir avec les confettis */
} }

8
js/main.js
View file

@ -310,7 +310,7 @@ function genererConfetti() {
// couleurs des confetti à generer // couleurs des confetti à generer
const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFD633", "#A833FF", "#33FFF6"] const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFD633", "#A833FF", "#33FFF6"]
const nb_confetti = 50 // nombre de confettis const nb_confetti = 150 // nombre de confettis
for (let i = 0; i < nb_confetti; i++) { for (let i = 0; i < nb_confetti; i++) {
@ -336,7 +336,9 @@ function genererConfetti() {
} }
// vide le conteneur à la fin pour ne pas surcharger la page d'elements setTimeout(() => {
// vide le conteneur à la fin pour ne pas surcharger la page d'elements
container.innerHTML = ""
}, 10000);
container.innerHTML = ""
} }