Bonjour,
Disponibilité de ZwiiCMS 10.6.03.
La dernière de version de la branche 10.6 de ZwiiCMS est publiée.
L'équipe de dév,
Sylvain et Fred.

Bannière défilante

sylvainlelievresylvainlelievre Messages 110Administrateur
28 mai modifié dans Scripts amis de Zwii
Ce script permet de placer sur votre site une bannière défilante, il a été réalisé sur une idée de @mulanee , co-concepteur du script.
Il modifie uniquement les 2 fichiers personnalisables head.inc.html et custom.css en y ajoutant les scripts, la bannière défilante continuera de fonctionner après une mise à jour de ZwiiCMS.

Principales fonctionnalités
  • Bannière défilante ou fixe sur des pages déclarées,
  • Paramétrage du nombre d'images constituant la bannière, de leur largeur,
  • Réglages de l'animation, vitesse, sens, etc...

Installation
  1. téléchargez puis dézippez l'archive,
  2. transférez le dossier 'bannieredefilante' à la racine de votre site ( au niveau de core, module, site),
  3. Saisissez dans un navigateur :  http://votre_site/bannieredefilante/install.php

Paramétrages

Note : la fluidité de déplacement de la bannière est bien meilleure que sur cette vidéo.

Réponses

  • mulaneemulanee Messages 116Membre
    Ce script permet de placer sur votre site une bannière défilante, il a été réalisé sur une idée de @mulanee , co-concepteur du script.
    Merci @sylvainlelievre pour cette mise en oeuvre :bee:
  • augrasaugras Messages 30Moderateur
    Bonjour,
    J'ai profité de la mise à jour vers la version 10.6.03 pour enfin remplacer la bannière défilante réalisée avec swiper qui avait l'inconvénient de devoir réexécuter suite à chaque mise à jour un fichier "d'install" pour réinscrire ce qui était nécessaire dans le fichier core.
    J'ai donc installé sans difficulté cette bannière défilante.
    Tout fonctionne bien sauf la bannière qui n'est pas fixe sur les pages indiquées : elle devrait être fixe sur les pages Boutique et Contact mais ça ne veux pas !
    Si ça peut aider d'autres utilisateurs je vous fais part de quelques adaptations.
    Je ne trouvait pas très esthétique le défilement en continu d'images qui n'avaient rien à voir les unes avec les autres et aucune continuité. De plus j'avais comme un effet de scintillement/sautillement très désagréable. J'ai donc cherché autre chose que le défilement dans les possibilités offertes par animation-timing-function dans custom.css afin d'avoir plutôt un effet type diaporama.
    J'ai finalement adopté : 
    animation-timing-function: steps(20, jump-none);
    J'ai mis le chiffre 20 car j'ai 20 images (d'autres paramètres sont possibles avec "steps").
    Effet désiré trouvé et en prime plus de scintillement.
    Par contre le passage d'une image à l'autre était un peu brutal. J'ai donc cherché comment ajouter une petite transition pour un changement plus en douceur. J'ai ajouté dans le custom.css : 
    .fading {
      animation:fading 7.5s infinite
    }
    @keyframes fading {
      0%{opacity:0.4}
      100%{opacity:1}
    }
    Cela permet d'avoir au départ une image un peu transparente et donc d'avoir une petite transition en douceur.
    Les 7.5s de fading résultent de animation-duration qui est pour mes 20 images à 150s rapporté justement au nombre d'images: 150/20=7.5.
    Ensuite il s'agit d'indiquer dans le script dans head d'utiliser pour chaque image ce fading : il faut simplement ajouter dans la balise img class="fading".
    On a donc par exemple :
    <a href="<?php echo helper::baseUrl().'accueil'; ?>"><img class="fading" src="<?php echo helper::baseUrl(false); ?>site/file/source/bannieres/norvege.jpg"></a>
    Vous pouvez-voir le résultat sur mon site de tests https://augras.eu/ZwiiCMS.
    J'ai ensuite essayé et cherché pas mal de temps pour afficher un texte sur chaque image... sans succès.
    La balise <figure> accepte normalement un texte avec <figcaption>mon texte</figcaption>.
    J'ai donc défini dans custom.css (repris de swiper-text) : 
    figcaption {
      display:inline-block;
      padding:10px;
      background:rgba(0,0,0,0.5);
      border-radius:8px; color:#fff;
      font:300 25px/30px 'Lato', sans-serif;
      position:absolute; left:20px;
      top:30px;
      transition:2s 2s;
    }
    La balise <figure> ne permet l'affichage que du premier <figcaption>, j'ai donc testé en mettant chaque balise <a> dans une balise <figure> : rien à faire. La bannière fonctionne bien mais tous les textes se superposent sur la première image.
    Je me dis qu'il ne doit pas manquer grand chose mais je ne mets pas le doigt dessus.
    Si quelqu'un trouve je suis preneur.
    Bon après-midi,
    Philippe
Connectez-vous ou Inscrivez-vous pour répondre.