Maak een scrollbanner

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Maak een scrollbanner

Bericht van TonnyKamper op zo 24 jun 2018 - 19:41

[Eenvoudige versie] Maak een scrollbanner: afbeelding of tekst


Deze tutorial laat zien hoe je een scroll-banner op je forum kunt invoegen.
Wees voorzichtig, in dit bericht vindt u een eenvoudige en minder aanpasbare versie voor de gemaakte banner.



BelangrijkVanwege een probleem met de ondersteuning van de < marquee > - labels door de Chrome-browser, nodigen wij u uit om uw scrollbanner tags te vervangen door een < selectiekader > ... < / marquee > - type code met deze nieuwe code.

1. Hoe een scrollbanner instellen?


Deze tutorial stelt voor om een ​​standaard rechts-naar-links scroll-banner te installeren in de code op jouw forum.
De code bestaat uit drie delen die op drie verschillende plaatsen in het beheerderspaneel moeten worden ingevoegd :

  • HTML-code met de inhoud van de banner.
  • CSS-code die animatie mogelijk maakt, de snelheid van het scrollen bepaalt en een "stop & start" optie biedt wanneer de muis over de banner beweegt.
  • Javascript om automatisch de grootte van de banner aan te passen en het scrollen aan te passen aan de specificaties van verschillende browsers (Firefox, Chrome, Internet Explorer, Safari, Opera, Maxthon).

HTML-code


De HTML is als zodanig samengesteld en moet worden gekopieerd en geplakt daar waar de scrollbanner moet verschijnen.
Bijvoorbeeld in:

- De beschrijving van een forum:
Beheerderspaneel Algemeen Categorieën en forums: In de beschrijving van een forum.

- Het startpagina bericht:
Beheerderspaneel Display Indexpagina Algemeen.

- Een widget:
Beheerderspaneel Modules Portal & widgets Forum Widgets Beheer: een aangepaste widget maken.

1. Om te bladeren door afbeeldingen:
Code:
<div class="bandef"><img src="url van afbeelding 1" alt="Alternatieve tekst" /><img src="url van afbeelding 2" alt="Alternatieve tekstf" /><img src="url van afbeelding 3" alt="Alternatieve tekst" /><img src="url van afbeelding 4" alt="Alternatieve tekst" /><img scr="url van afbeelding 5" alt="Alternatieve tekst" /></div>
Het is noodzakelijk om de URL van de afbeeldingen te vervangen door het adres van de afbeeldingen die je wilt gebruiken, bijvoorbeeld: https://i.servimg.com/u/f38/18/81/60/30/30-01-17.png

2. Voor het scrollen van tekst:
Code:
<div class="bandef"><span>Dit is een scrollend bericht !</span></div>
Vul je eigen tekst in die moet worden weergegeven tussen < span > < / span > -tags.

CSS-code


Hier is de CSS-code om toe te voegen, ga naar:

Beheerderspaneel Display Plaatjes en Kleuren Kleuren  CSS Style Sheet tab
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
}
Als je de schuifsnelheid wilt wijzigen, moet je de waarde 20s door een andere waarde vervangen, lager zodat het scrollen sneller gaat ( 10s ) of hoger zodat het langzamer gaat ( 40s ).



BelangrijkHet is ook nodig om de identieke waarde voor -webkit-animatielijn 5 voor de andere browsers te wijzigen.

Het script


Dit script zou hier moeten worden toegevoegd:

Beheerderspaneel Modules HTML & Javascript JavaScript code beheer:

Maak een nieuw script aan | Titel: eigen keus | Plaatsing: op alle pagina's:
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 }'); }
   }
});

Hoe het schuiven stoppen wanneer muis erover gaat verwijderen?


In deze tutorial hebben we standaard een stop opgenomen wanneer de muis over de afbeeldingen of scrolltekst beweegt.
Als u wilt dat de banner continu blijft schuiven, wijzigt u de variabele st in het script in regel 3 en vervangt u y door n:
Code:
var m = $('.bandef'), w = 0, cw = m.parent().add('<span />').width(), st = 'n';

avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 353
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum