Créer une bannière défilante : image ou texte

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Créer une bannière défilante : image ou texte

Message par Shadow Mar 03 Fév 2015, 11:55

[Version simple] Créer une bannière défilante : image ou texte

Cette astuce vous explique comment insérer une bannière défilante (image(s) ou texte(s)) sur votre forum. Dans une première astuce, vous trouverez une version simple et moins personnalisable pour créer ladite bannière défilante, puis, dans une seconde astuce, vous trouverez une version avancée vous permettant de personnaliser l'affichage.

Suite à un problème de prise en charge de la balise <marquee> par de nombreux navigateurs, nous vous invitons à remplacer vos bannières défilantes utilisant un code de type <marquee>.....</marquee> par l'astuce proposée ci-dessous.

Mettre en place une bannière défilante


Cette astuce propose d'installer une bannière défilante de droite à gauche sur votre forum. Le code est en trois parties à insérer à trois endroits différents dans le panneau d'administration :

  1. Un code HTML avec le contenu de la bannière ;

  2. Un code CSS qui permet l'animation, définit la vitesse de défilement et offre une option "stop & start" au survol de la souris ;

  3. Un script pour adapter automatiquement la taille de la bannière et adapter le défilement aux spécificités des différents navigateurs (Firefox, Chrome, Internet Explorer, Safari, Opera, Maxthon).

Insertion du code HTML


Il se compose comme tel et doit être copié à l'endroit où l'annonce défilante doit apparaître. Ce code HTML doit être inséré dans un emplacement acceptant le HTML, comme le message d'accueil, dans la description d'un forum, sur le portail, dans un widget...

Pour un défilement d'images


Code:
<div class="bandef"><img src="url de l'image 1" alt="Texte alternatif" /><img src="url de l'image 2" alt="Texte alternatif" /><img src="url de l'image 3" alt="Texte alternatif" /><img src="url de l'image 4" alt="Texte alternatif" /><img scr="url de l'image 5" alt="Texte alternatif" /></div>

Il faut remplacer url de l'image x par l'adresse de l'image. Vous devez également remplacer les termes Texte alternatif correspondant à chacune des images. Ce texte d'affichera au survol de votre souris sur l'image. De plus, si l'URL de l'image ne fonctionne plus, le texte s'affichera en lieu et place.

Pour un défilement de texte


Code:
<div class="bandef"><span>Ceci est un message défilant !</span></div>

Il vous suffit de remplacer Ceci est un message défilant ! par le texte de votre choix.

Insertion du CSS


Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Code:
.bandef{
    display: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: marquee 20s linear infinite; /* Chrome, Safari, Opera */
    animation: marquee 20s linear infinite; /* Vitesse de défilement */
}
 
/*  Arrêt du défilement au survol */
.bandef:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

Pour modifier la vitesse de défilement, il faut changer la valeur 20s par une autre valeur, plus faible pour que le défilement soit plus rapide (10s), ou plus élevée pour qu'il soit plus lent (40s). Il faut également modifier la valeur à l'identique pour -webkit-animation ligne 5, pour les autres navigateurs.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Bannière défilante" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
jQuery(function($) {
    if (typeof _userdata.page_desktop === "undefined") {
        var m = $('.bandef'),
            w = 0,
            cw = m.parent().add('<span />').width(),
            st = 'y';
        if (navigator.userAgent.match(/MSIE/) || navigator.userAgent.match(/rv:11\.0/) || navigator.userAgent.match(/maxthon/i) || (navigator.userAgent.match(/Safari/) && !navigator.userAgent.match(/Chrome/))) {
            if (st == 'y') {
                m.attr({
                    'onmouseover': 'this.stop();',
                    'onmouseout': 'this.start();'
                });
            }
            m.attr('direction', 'left').removeAttr('class').parent().html(m.parent().html().replace(/div/g, 'marquee'));
        }
        m.css('max-width', cw + 'px').fadeIn().closest('td.row1').css('padding', '2px 0');
        $('.bandef img, .bandef span').each(function() {
            w = w + parseInt($(this).add('<span />').width());
        });
        if ($('.bodylinewidth').length != 0) $('.bandef').each(function() {
            if ($(this).parent().is('div.gensmall')) w = w + cw;
        });
        $('head').append('<style id="marquee_style">@-webkit-keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } } @keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } }</style>');
        if (st == 'n') {
            $('#marquee_style').append('.bandef:hover{ -webkit-animation-play-state: initial !important; animation-play-state: initial !important }');
        }
    }
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Supprimer l'arrêt du défilement au survol de la souris


Dans cette astuce, nous avons inclus par défaut une arrêt lorsque la souris survole les images ou le texte défilant.

Voir illustration :

Pour que la bannière défile sans arrêt au survol, il faut modifier la variable st dans le script à la ligne 3 et remplacer y par n :

Code:
var m = $('.bandef'), w = 0, cw = m.parent().add('<span />').width(), st = 'n';

Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Créer une bannière défilante: image ou texte

Message par Shadow Mar 03 Fév 2015, 11:57

[Version avancée] Créer une bannière défilante : image ou texte

Cette astuce vous explique comment insérer une bannière défilante (image(s) ou texte(s)) sur votre forum avec des paramètres avancées pour la personnaliser au mieux.

Suite à un problème de prise en charge de la balise <marquee> par de nombreux navigateurs, nous vous invitons à remplacer vos bannières défilantes utilisant un code de type <marquee>.....</marquee> par l'astuce proposée ci-dessous.

Mettre en place une bannière défilante


Cette astuce propose d'installer une bannière défilante de droite à gauche sur votre forum. Le code est en trois parties à insérer à trois endroits différents dans le panneau d'administration :

  1. Un code HTML avec le contenu de la bannière ;

  2. Un code CSS qui permet l'animation, définit la vitesse de défilement et offre une option "stop & start" au survol de la souris ;

  3. Un script pour adapter automatiquement la taille de la bannière et adapter le défilement aux spécificités des différents navigateurs (Firefox, Chrome, Internet Explorer, Safari, Opera, Maxthon).

Insertion du code HTML


Il se compose comme tel et doit être copié à l'endroit où l'annonce défilante doit apparaître. Ce code HTML doit être inséré dans un emplacement acceptant le HTML, comme le message d'accueil, dans la description d'un forum, sur le portail, dans un widget...

Pour un défilement d'images


Code:
<div class="bandef"><img src="url de l'image 1" alt="Texte alternatif" /><img src="url de l'image 2" alt="Texte alternatif" /><img src="url de l'image 3" alt="Texte alternatif" /><img src="url de l'image 4" alt="Texte alternatif" /><img scr="url de l'image 5" alt="Texte alternatif" /></div>

Il faut remplacer url de l'image x par l'adresse de l'image. Vous devez également remplacer les termes Texte alternatif correspondant à chacune des images. Ce texte d'affichera au survol de votre souris sur l'image. De plus, si l'URL de l'image ne fonctionne plus, le texte s'affichera en lieu et place.

Pour un défilement de texte


Code:
<div class="bandef"><span>Ceci est un message défilant !</span></div>

Il vous suffit de remplacer Ceci est un message défilant ! par le texte de votre choix.

Insertion du CSS


Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Code:
.bandef{
    display: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: marquee 20s linear infinite; /* Chrome, Safari, Opera */
    animation: marquee 20s linear infinite; /* Vitesse de défilement */
}
 
/*  Arrêt du défilement au survol */
.bandef:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

Pour modifier la vitesse de défilement, il faut changer la valeur 20s par une autre valeur, plus faible pour que le défilement soit plus rapide (10s), ou plus élevée pour qu'il soit plus lent (40s). Il faut également modifier la valeur à l'identique pour -webkit-animation ligne 5, pour les autres navigateurs.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Bannière défilante" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:
jQuery(function($) {
    if (typeof _userdata.page_desktop === "undefined") {
        var m = $('.bandef'),
            w = 0,
            cw = m.parent().add('<span />').width(),
            st = 'y';
        if (navigator.userAgent.match(/MSIE/) || navigator.userAgent.match(/rv:11\.0/) || navigator.userAgent.match(/maxthon/i) || (navigator.userAgent.match(/Safari/) && !navigator.userAgent.match(/Chrome/))) {
            if (st == 'y') {
                m.attr({
                    'onmouseover': 'this.stop();',
                    'onmouseout': 'this.start();'
                });
            }
            m.attr('direction', 'left').removeAttr('class').parent().html(m.parent().html().replace(/div/g, 'marquee'));
        }
        m.css('max-width', cw + 'px').fadeIn().closest('td.row1').css('padding', '2px 0');
        $('.bandef img, .bandef span').each(function() {
            w = w + parseInt($(this).add('<span />').width());
        });
        if ($('.bodylinewidth').length != 0) $('.bandef').each(function() {
            if ($(this).parent().is('div.gensmall')) w = w + cw;
        });
        $('head').append('<style id="marquee_style">@-webkit-keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } } @keyframes marquee { 0%  { text-indent: ' + cw + 'px } 100% { text-indent: -' + w + 'px } }</style>');
        if (st == 'n') {
            $('#marquee_style').append('.bandef:hover{ -webkit-animation-play-state: initial !important; animation-play-state: initial !important }');
        }
    }
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Personnaliser le défilement de la bannière


Il est possible de personnaliser le défilement grâce aux différents attributs spécifiés dans le code HTML :

  • Modifier le sens de défilement (data-direction) ;

  • Arrêter le défilement au survol de la souris (data-stop) ;

  • Modifier la vitesse de défilement (data-speed).

Code:
<div class="bandef" data-direction="right" data-stop="n" data-speed="8"><span> Texte à insérer</span></div>

Grâce à ses différents attributs, il est possible de modifier les paramètres de chaque bannière indépendamment du CSS et du code Javascript.

Pour cela, il faut bien préciser les différents attributs ci-dessus dans le code HTML avec leur valeur propre.

Exemple : Par défaut la vitesse des bannières défilantes est gérée par le CSS (20s), si jamais on souhaite créer une bannière défilante sans l'attribut data-speed la vitesse de cette bannière sera de 20 secondes, si à côté de celle-ci on crée une autre bannière défilante avec un attribut data-speed, avec pour valeur 10, cette bannière et celle-ci seulement aura une vitesse de défilement de 10 secondes, la première gardera la vitesse de 20 secondes.

Modifier le sens de défilement des images / des textes


Pour modifier le sens de défilement des images ou du texte, il faut dans le code HTML modifier la valeur de l'attribut data-direction. On a quatre possibilité de défilement pour l'attribut data-direction : left (gauche), right (droite), up (haut) et down (bas).

Si je veux que le texte défile vers le haut, voici comment modifier le code de base :

Code:
<div class="bandef" data-direction="up" data-stop="n" data-speed="8"><span>Ceci est un message défilant vers le haut !</span></div>

Arrêter le défilement au survol de la souris


Dans cette astuce, nous avons également inclus la possibilité d'arrêter le défilement lorsque la souris survole les images ou le texte défilant.

Voir illustration :

Pour que la bannière défile avec ou sans arrêt au survol, il faut modifier l'attribut data-stop. Celui-ci peut prendre deux valeurs : y et n, y pour autoriser l'arrêt au survol de la souris et n pour désactiver cette option.

Donc si je veux que le défilement s'arrête au survol, voici comment le code doit être modifié :

Code:
<div class="bandef" data-direction="right" data-stop="y" data-speed="8"><span>Ceci est un message défilant avec arrêt au survol de la souris !</span></div>

Modifier la vitesse de défilement des images / des textes


Pour cela, il faudra modifier l'attribut data-speed. La valeur renseignée correspond au nombre de secondes pendant lequel se fait le défilement (par défaut nous avons indiqué 8 comme valeur).

Si je veux que le défilement se fasse plus lentement, en 15 secondes par exemple voici comment modifier le code :

Code:
<div class="bandef" data-direction="right" data-stop="n" data-speed="15"><span>Ceci est un message défilant en 15 secondes !</span></div>

Si je veux que la bannière défile très vite, je dois indiquer une valeur plus faible comme 4 secondes par exemple :

Code:
<div class="bandef" data-direction="right" data-stop="n" data-speed="4"><span>Ceci est un message défilant très rapidement, en 4secondes !</span></div>

Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum