| ... |
... |
@@ -22,15 +22,6 @@ |
| 22 |
22 |
z-index: 10; |
| 23 |
23 |
} |
| 24 |
24 |
|
| 25 |
|
-.bouton-guide-multicolore.falling { |
| 26 |
|
- animation: fall-and-bounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, |
| 27 |
|
- gradient-shift 1s ease infinite, |
| 28 |
|
- pulse-glow 0.5s ease-in-out infinite, |
| 29 |
|
- flash-extreme 0.3s linear infinite, |
| 30 |
|
- rotate-fall 1.2s ease-in forwards; |
| 31 |
|
- box-shadow: 0 0 100px rgba(102, 126, 234, 1), 0 0 200px rgba(118, 75, 162, 0.8); |
| 32 |
|
-} |
| 33 |
|
- |
| 34 |
34 |
.bouton-guide-multicolore::before { |
| 35 |
35 |
content: ''; |
| 36 |
36 |
position: absolute; |
| ... |
... |
@@ -42,7 +42,7 @@ |
| 42 |
42 |
animation: shine 2s linear infinite; |
| 43 |
43 |
} |
| 44 |
44 |
|
| 45 |
|
-.bouton-guide-multicolore:hover:not(.falling) { |
|
36 |
+.bouton-guide-multicolore:hover { |
| 46 |
46 |
transform: translateY(-8px) scale(1.15) rotate(2deg); |
| 47 |
47 |
box-shadow: 0 0 60px rgba(102, 126, 234, 1), 0 0 120px rgba(118, 75, 162, 0.8), 0 20px 40px rgba(0, 0, 0, 0.5); |
| 48 |
48 |
animation: gradient-shift 1s ease infinite, pulse-glow 0.5s ease-in-out infinite, flash-extreme 0.3s linear infinite, shake 0.5s ease infinite; |
| ... |
... |
@@ -52,43 +52,6 @@ |
| 52 |
52 |
transform: translateY(-3px) scale(1.1); |
| 53 |
53 |
} |
| 54 |
54 |
|
| 55 |
|
-/* Animation de chute */ |
| 56 |
|
-@keyframes fall-and-bounce { |
| 57 |
|
- 0% { |
| 58 |
|
- transform: translateY(0) scale(1); |
| 59 |
|
- } |
| 60 |
|
- 40% { |
| 61 |
|
- transform: translateY(calc(100vh - 200px)) scale(1.1, 0.9); |
| 62 |
|
- } |
| 63 |
|
- 50% { |
| 64 |
|
- transform: translateY(calc(100vh - 200px)) scale(1.1, 0.9); |
| 65 |
|
- } |
| 66 |
|
- 65% { |
| 67 |
|
- transform: translateY(calc(100vh - 350px)) scale(0.95, 1.05); |
| 68 |
|
- } |
| 69 |
|
- 75% { |
| 70 |
|
- transform: translateY(calc(100vh - 200px)) scale(1.05, 0.95); |
| 71 |
|
- } |
| 72 |
|
- 85% { |
| 73 |
|
- transform: translateY(calc(100vh - 250px)) scale(0.98, 1.02); |
| 74 |
|
- } |
| 75 |
|
- 95% { |
| 76 |
|
- transform: translateY(calc(100vh - 200px)) scale(1.02, 0.98); |
| 77 |
|
- } |
| 78 |
|
- 100% { |
| 79 |
|
- transform: translateY(calc(100vh - 200px)) scale(1); |
| 80 |
|
- } |
| 81 |
|
-} |
| 82 |
|
- |
| 83 |
|
-@keyframes rotate-fall { |
| 84 |
|
- 0% { |
| 85 |
|
- transform: rotate(0deg); |
| 86 |
|
- } |
| 87 |
|
- 100% { |
| 88 |
|
- transform: rotate(720deg); |
| 89 |
|
- } |
| 90 |
|
-} |
| 91 |
|
- |
| 92 |
92 |
/* Cercles hypnotiques */ |
| 93 |
93 |
.hypnotic-circle { |
| 94 |
94 |
position: absolute; |
| ... |
... |
@@ -353,7 +353,6 @@ |
| 353 |
353 |
const soundToggle = document.getElementById('soundToggle'); |
| 354 |
354 |
const hypnoticButton = document.getElementById('hypnoticButton'); |
| 355 |
355 |
let soundEnabled = true; |
| 356 |
|
-let hasFallen = false; |
| 357 |
357 |
|
| 358 |
358 |
soundToggle.addEventListener('click', function() { |
| 359 |
359 |
soundEnabled = !soundEnabled; |
| ... |
... |
@@ -366,23 +366,11 @@ |
| 366 |
366 |
} |
| 367 |
367 |
}); |
| 368 |
368 |
|
| 369 |
|
-// Événements de survol pour accélérer le son ET faire tomber le bouton |
|
322 |
+// Événements de survol pour accélérer le son |
| 370 |
370 |
hypnoticButton.addEventListener('mouseenter', function() { |
| 371 |
371 |
if (soundEnabled && isPlaying) { |
| 372 |
372 |
speedUpSound(); |
| 373 |
373 |
} |
| 374 |
|
- |
| 375 |
|
- // Faire tomber le bouton ! |
| 376 |
|
- if (!hasFallen) { |
| 377 |
|
- hypnoticButton.classList.add('falling'); |
| 378 |
|
- hasFallen = true; |
| 379 |
|
- |
| 380 |
|
- // Réinitialiser après l'animation |
| 381 |
|
- setTimeout(() => { |
| 382 |
|
- hypnoticButton.classList.remove('falling'); |
| 383 |
|
- hasFallen = false; |
| 384 |
|
- }, 1200); |
| 385 |
|
- } |
| 386 |
386 |
}); |
| 387 |
387 |
|
| 388 |
388 |
hypnoticButton.addEventListener('mouseleave', function() { |
