Bandeau pleine largeur hauteur fixe - effet zoom - responsive

[Tôt]

Bonjour,

Ce petit extrait de code, à intégrer dans l'une de vos pages, permet d'afficher des images qui défilent en boucle avec un effet de zoom

Code (html) Sélectionner Étendre

<!-- BANDEAU PLEINE LARGEUR HAUTEUR FIXE -->
<div id="cadre" style="width: 100%; height: 15cm; position: relative; overflow: hidden;"><!-- IMAGE --> <img id="img" src="root.my.be" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 5s linear;"> <!-- AUCUN TEXTE (DIV VIDE) -->
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</div>
<p>
        <script>
                const images = [
                        "https://www.deltacms.fr/site/file/source/font/1.png",
                        "https://www.deltacms.fr/site/file/source/font/1.jpg",
                        "https://www.deltacms.fr/site/file/source/font/2.jpg",
                ];

                let index = 0;
                const img = document.getElementById("img");

                function animate() {
                        index = (index + 1) % images.length;
                        img.src = images[index];

                        img.style.transition = "none";
                        img.style.transform = "scale(1)";
                        void img.offsetWidth;

                        img.style.transition = "transform 5s linear";
                        img.style.transform = "scale(1.3)";
                }

                animate();
                setInterval(animate, 5000);
        </script>
</p>

Sur la deuxième ligne du code, la valeur **15 cm** peut être ajustée selon vos besoins. N'hésitez pas à la modifier afin d'observer l'impact visuel sur votre bandeau en pleine largeur.

Vous trouverez également plusieurs URL du type : 
"https://www.deltacms.fr/site/file/source/font/1.png",

Ces adresses doivent être remplacées par le chemin de vos propres images, celles que vous souhaitez mettre en avant.

Pour cela, vous pouvez importer vos visuels via **Delta**, puis récupérer leur URL afin de la copier-coller dans le code.

Cordialement,

[Sylvain]

Bonjour Tôt,

Un grand merci pour ce partage.
Cordialement

[Tôt]

Avec plaisir.

L'intégrer dans Delta pourrait constituer une amélioration intéressante.
À vous d'en juger.

Je vous souhaite un excellent week‑end.

Cordialement,