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

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

  • 0

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

Message par Shadow le Mar 3 Fév 2015 - 11:55

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

Ce tutoriel vous explique comment insérer une bannière défilante sur votre forum.

Attention, dans ce post, vous trouverez la version simple et moins personnalisable pour la bannière créée. Pour une version plus complète, merci de vous reporter au prochain message. Wink

Warning Suite à un problème de prise en charge de la balise <marquee> par la navigateur Chrome, nous vous invitons à remplacer vos bannières défilantes utilisant un code de type <marquee>.....</marquee> par ce nouveau code.

Comment mettre en place une bannière défilante?


Ce tutoriel propose d'installer une bannière défilante de droite à gauche par défaut dans le code sur son 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).

Le code HTML


Il se compose comme tel et doit être copié à l'endroit où l'annonce défilante doit apparaître.

Par exemple dans:

- La description d'un forum: Panneau d'Administration > Général > Catégories et forums: Description d'un forum edit
- Le message de page d'accueil: Panneau d'Administration > Affichage > Page d'accueil > Généralités
- Un widget: Panneau d'Administration > Modules > Portail & Widgets > Gestion des widgets du forum: Créer un widget personnalisé


1. Pour un défilement d'images:

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

Il faut remplacer url de l'image x par l'adresse de l'image, exemple http://i38.servimg.com/u/f38/18/81/60/30/30-01-17.png


2. Pour un défilement de texte:

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

Indiquer le texte à faire défiler entre les balises <span></span>.

Le code CSS


Voici le code CSS à ajouter dans: Panneau d'Administration > Affichage > Image et Couleurs > 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).

Warning Il faut également modifier la valeur à l'identique pour -webkit-animation ligne 5, pour les autres navigateurs.

Le script


Ce script est à ajouter ici: Panneau d'Administration > Modules > HTML & Javascript > Gestion des codes Javascript: Créer un nouveau script / sur toutes les pages:



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 }'); }
   }
});

Comment supprimer l'arrêt du défilement au survol de la souris?


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


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';



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Shadow le Mar 3 Fév 2015 - 11:57

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

Ce tutoriel vous explique comment insérer une bannière défilante image et/ou texte sur votre forum avec des paramètres avancées pour la personnaliser au mieux. Wink

1. Comment mettre en place une bannière défilante?


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 et des attributs permettant de la personnaliser.
  • 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).

Le code HTML


Il se compose comme tel et doit être copié à l'endroit où l'annonce défilante doit apparaître.

Par exemple dans:

- La description d'un forum: Panneau d'Administration > Général > Catégories et forums: Description d'un forum edit
- Le message de page d'accueil: Panneau d'Administration > Affichage > Page d'accueil > Généralités
- Un widget: Panneau d'Administration > Modules > Portail & Widgets > Gestion des widgets du forum: Créer un widget personnalisé


1. Pour un défilement d'images:

Code:
<div class="bandef" data-direction="right" data-stop="n" data-speed="8"><img src="url de l'image 1"><img src="url de l'image 2 "><img src="url de l'image 3"><img src="url de l'image 4"><img scr="url de l'image 5"></div>

Il faut remplacer url de l'image x par l'adresse de l'image, exemple http://i38.servimg.com/u/f38/18/81/60/30/30-01-17.png


2. Pour un défilement de texte:

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

Indiquer le texte à faire défiler entre les balises <span></span>.

Le code CSS


Voici le code CSS à ajouter dans: Panneau d'Administration > Affichage > Image et Couleurs > Couleurs: Feuille de style CSS

Code:
/* MARQUEE JAVASCRIPT SOLUTION */
.bandef {
    position: relative;
    display: none;
    white-space: nowrap;
    overflow: hidden;
}

.bandef>div{
    position: absolute;
    -webkit-animation: marquee 20s linear infinite; /* Chrome, Safari, Opera */
    animation: marquee 20s linear infinite;
}

/*  Arrêt du défilement au survol */
.bandef:hover>div{
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

/* Non-arrêt du défilement au survol pour les bannières définies */
.bandef:hover>div.nonstop{
    -webkit-animation-play-state: initial !important;
    animation-play-state: initial !important
}

/* Arrêt du défilement au survol pour les bannières définies */
.bandef:hover>div.stop{
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important
}

Le script


Ce script est à ajouter ici: Panneau d'Administration > Modules > HTML & Javascript > Gestion des codes Javascript: Créer un nouveau script / sur toutes les pages:


Code:
jQuery(function($){
   if(typeof _userdata.page_desktop === "undefined" && !location.pathname.match(/\/g[0-9]*/)){
      var stop = 'y';
      var m = $('.bandef'), childs = $('.bandef').find('img, span, a, div'), ie = (navigator.userAgent.match(/MSIE/) || navigator.userAgent.match(/rv:11\.0/)), maxthon = navigator.userAgent.match(/maxthon/i), safari = (navigator.userAgent.match(/Safari/) && !navigator.userAgent.match(/Chrome/)), direction = $('.bandef').attr('data-direction'), cw = m.parent().add('<span />').width(), w = 0, ch = 0, h = 0;
      if(ie || maxthon || safari){
         if(stop == 'y' && m.data('stop') != 'n'){ m.attr({'onmouseover':'this.stop();', 'onmouseout':'this.start();'}); }
         m.attr('direction', direction).removeAttr('class').parent().html(m.parent().html().replace(/div/g, 'marquee'));
         $('marquee[data-direction]').css('height', 'auto');
      }
      m.css('max-width', cw+'px').fadeIn().contents().wrapAll('<div />');
      childs.each(function(){ h = h+parseInt($(this).height())+10; if($(this).height() > ch) ch = $(this).height()+10; }); m.css('height', ch+'px').css('line-height', ch+'px');
      if(direction == 'left' || direction == 'right'){
         childs.each(function(){ w = w+parseInt($(this).add('<span />').width()); });
         $('head').append('<style id="marquee_style">@-webkit-keyframes marquee { 0%  { '+direction+': '+cw+'px } 100% { '+direction+': -'+w+'px } } @keyframes marquee { 0%  { '+direction+': '+cw+'px } 100% { '+direction+': -'+w+'px } }</style>');
         if(stop != 'y'){ $('#marquee_style').append('.bandef:hover div{ -webkit-animation-play-state: initial !important; animation-play-state: initial !important }'); }
      }else{
         if(direction == 'up') direction = 'top';
         else if(direction == 'down') direction = 'bottom';
         $('marquee[data-direction]').css('text-align', 'center');
         childs.each(function(){ $(this).css({'display':'block', 'padding':'5px 0', 'margin':'auto'}); });
         $('head').append('<style>@-webkit-keyframes marquee { 0%  { '+direction+': '+ch+'px } 100% { '+direction+': -'+h+'px } } @keyframes marquee { 0%  { '+direction+': '+ch+'px } 100% { '+direction+': -'+h+'px } }</style>');
         if(stop != 'y'){ $('#marquee_style').append('.bandef:hover div{ -webkit-animation-play-state: initial !important; animation-play-state: initial !important }'); }
      }
      $('.bandef').each(function(){
         var dstop = $(this).data('stop'), dspeed = $(this).data('speed');
         if(dstop == 'n') $(this).children('div').addClass('nonstop');
         else if(dstop == 'y') $(this).children('div').addClass('stop');
         $(this).children('div').css({'-webkit-animation-duration': dspeed+'s', 'animation-duration': dspeed+'s'});
      });
   }
});

2. Comment 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.

Comment modifier le sens de défilement des images/du texte?


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>

Comment arrêter le défilement au survol de la souris?


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


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 2 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>

Comment modifier la vitesse de défilement des images/du texte?


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>



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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


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