Modifications pour le document Home

Résumé

• Propriétés de la Page (1 modifications, 0 ajouts, 0 suppressions)

Détails

Propriétés de la Page

Contenu

...	...	@@ -22,6 +22,15 @@
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	+
25	25	.bouton-guide-multicolore::before {
26	26	content: '';
27	27	position: absolute;
...	...	@@ -33,7 +33,7 @@
33	33	animation: shine 2s linear infinite;
34	34	}
35	35
36		-.bouton-guide-multicolore:hover {
	45	+.bouton-guide-multicolore:hover:not(.falling) {
37	37	transform: translateY(-8px) scale(1.15) rotate(2deg);
38	38	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);
39	39	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;
...	...	@@ -43,6 +43,43 @@
43	43	transform: translateY(-3px) scale(1.1);
44	44	}
45	45
	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	+
46	46	/* Cercles hypnotiques */
47	47	.hypnotic-circle {
48	48	position: absolute;
...	...	@@ -307,6 +307,7 @@
307	307	const soundToggle = document.getElementById('soundToggle');
308	308	const hypnoticButton = document.getElementById('hypnoticButton');
309	309	let soundEnabled = true;
	356	+let hasFallen = false;
310	310
311	311	soundToggle.addEventListener('click', function() {
312	312	soundEnabled = !soundEnabled;
...	...	@@ -319,11 +319,23 @@
319	319	}
320	320	});
321	321
322		-// Événements de survol pour accélérer le son
	369	+// Événements de survol pour accélérer le son ET faire tomber le bouton
323	323	hypnoticButton.addEventListener('mouseenter', function() {
324	324	if (soundEnabled && isPlaying) {
325	325	speedUpSound();
326	326	}
	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	+ }
327	327	});
328	328
329	329	hypnoticButton.addEventListener('mouseleave', function() {