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.

DEMO

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,

[Gedeonluc]

Bonjour,
J'ai essayé d'intégrer le script sur mon site, mais je trouve que l'animation est un peu lente au chargement et le défilement met plusieurs secondes à bien se stabiliser.

[Gedeonluc]

Est-ce que ce comportement est normal selon vous, ou cela peut-il venir de mon site (hébergement, poids des images, configuration, etc.) ?
Merci d'avance pour votre retour.

[Tôt]

Bonjour Gedeonluc,

À votre place, je m'amuserais davantage à utiliser le code cité ci-dessus. Sylvain, Lionel, ou les deux ensemble, ont créé un plugin appelé Animated Slides.

C'est beaucoup plus simple que de coder l'animation de chaque image directement dans le code source de Delta. Toutes les images sont placées dans un dossier et le plugin se charge du reste.

J'avais déjà donné cette information avant la création du plugin. J'avoue que je garde toujours ce code sous le coude, mais si je devais réaliser un diaporama animé aujourd'hui, j'utiliserais sans hésiter le plugin développé pour Delta.

Pour répondre à votre question, il faudrait d'abord connaître le poids de vos images. Il faut également tenir compte de votre hébergement : si vous êtes sur un serveur mutualisé, les ressources sont partagées entre plusieurs utilisateurs. Dans ce cas, ces deux facteurs peuvent effectivement avoir un impact sur les performances.

Je ne pense toutefois pas que le problème vienne du code lui-même.

Maintenant, je ne suis pas non plus un génie de l'informatique, mais plutôt un amateur. Sinon, je n'utiliserais probablement pas un script comme Delta puisque je serais capable de développer mes propres solutions.

Avec Delta, j'essaie surtout de rendre mon site convivial et je partage volontiers mes découvertes avec la communauté.

Si vous nous communiquez l'URL de votre site, nous pourrons jeter un œil à l'effet que vous cherchez à obtenir.

Chez quel hébergeur êtes-vous ?

Cordialement,