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

[Shadow]

[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 : Un code HTML avec le contenu de la bannière ; 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 ; 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 Citation : 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 Citation : 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';

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Self et Vivi. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

[Shadow]

[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 : Un code HTML avec le contenu de la bannière ; 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 ; 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 Citation : 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 Citation : 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>

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Self et Vivi. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.