DETAILS GALERIE

/* ARRIÈRE-PLAN */ #background-gallery { position: fixed; inset: 0; overflow: hidden; z-index: -10; background: #050505; } /* Chaque image */ .bg-image { position: absolute; inset: -5%; width: 110%; height: 110%; object-fit: cover; opacity: 0; filter: brightness(0.55) saturate(1.15) contrast(1.05); transform: scale(1.02); transition: opacity 3s ease, transform 20s ease; will-change: opacity, transform; } /* Image active */ .bg-image.active { opacity: 1; transform: scale(1.08); } /* Lumière douce devant les images */ #background-gallery::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at center, transparent 20%, rgba(0,0,0,0.35) 100% ); pointer-events: none; }

/* ================================================= GALERIE D'ARRIÈRE-PLAN ================================================= */ const images = [ "images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg" ]; const background = document.getElementById("background-gallery"); /* Création des images */ images.forEach((source, index) => { const image = document.createElement("img"); image.src = source; image.className = "bg-image"; if (index === 0) { image.classList.add("active"); } background.appendChild(image); }); /* Images chargées */ const backgrounds = document.querySelectorAll(".bg-image"); let current = 0; /* Changement très lent */ setInterval(() => { backgrounds[current] .classList.remove("active"); current++; if (current >= backgrounds.length) { current = 0; } backgrounds[current] .classList.add("active"); }, 12000);