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
<!-- 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,
Bonjour Tôt,
Un grand merci pour ce partage.
Cordialement
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,