Come realizzare un banner animato

Oggi vediamo come realizzare un banner animato utilizzando la libreria jQuery.  Dato che questa libreria contiene gia gli strumenti necessarie per la sua realizzazione ed in oltre se utilizzi una CMS per esempio come Joomla la biblioteca jQuery sara gia installata sul tuo sito web. Inoltre, ogni banner avrà il suo collegamento.

Non devi essere un grande programmatore per realizzare un banner animato perché potrai semplicemente copiare il codice ed inserire in esso  proprie dati come link di collegamenti e immagini. Il nostro banner cambierà le immagini con intervallo di 4 secondi e  l'ordine delle immagini e d'effetti sarà casuale. Questo l'intervallo è ottimale e casualità di effetti animati non provoca l'irritazione di utenti.

Effetti di animazione per banner

Per cambiare immagini nel banner utilizzeremo 5 effetti animati se tu  pensi che sonno troppi, potresti lasciare solo quelli che ti piacono. Eccoli:

  1. Scorrimento orizzontale;
  2. Scorrimento verticale;
  3. Smooth sostituendo tutti i pixel d' immagine;
  4. Immagine spunta da un punto ;
  5. Rotazione orizzontale in forma del cubo.

Esempio del banner

1.Collegare jQuery

Per far funzionare animazioni è necessario collegare la libreria jQuery. Per quelli che utilizzano una CMS tipo Joomla ripeto ancora una volta, basta verificare se questa libreria viene caricata con la pagina del sito. In altri casi per esempio per una landing page nel tag <head> della  sito, inserire la seguente riga, useremo un aversione remota da CDN

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 

2. Stili CSS del banner

   Dopo di che  dovremo creare dei stili css per il nostro banner animato inserendo li in un fail di  stile CSS il quale dovremo collegare al nostro sito web nel tag <head></head> con aiuto del tag <style>

<style type="text/css">
.slider{width:200px;height:300px;overflow:hidden;position:relative;margin:15px auto 30px}
.slider>div, .slider a
{width:200px;height:300px;left:0px;position:absolute;background-size:100% 100%}
.slide1{background:url(images/nome_immagine1.jpg)}
.slide2{background:url(images/nome_immagine2.jpg)}
.slide3{background:url(images/nome_immagine3.jpg)}
</style>

Cosa c'e da cambiare nei stili CSS?

Dimensioni del  Banner – nella mia versione larghezza - 200px, altezza - 300px. I valori che riguardano posizione sulla pagina rispetto altri ellementi della pagina
Inserire e modificare le impostazione di background per ogni banner : url (...) , puoi la quantita di banner io ne ho 3. Se hai bisogno di più,  aggiungi le simili stringhe: .slide4 {...}, .slide5 {...}, ...

3. Collegare script che gestira il nostro banner animato

 Inserire lo script e il codice html del nostro banner animato nel posto desiderato della  pagina:

<script>$(function(){var _rand=function(min, max){return Math.floor(Math.random()*(max-min+1))+min;};var ink=1,oldink=3;var slider=function(){setTimeout(function(){var callback=arguments.callee;$('.slider div').css({zIndex:0,width:'200px',height:'300px',top:'0px',left:'0px'});$('.slide'+oldink).css({zIndex:1});
switch(_rand(1,5)){
case 1:
$('.slide'+ink).css({left:'200px',top:'0px',zIndex:2}).animate({left:'0px'},2000,slider);$('.slide'+oldink).css({left:'0px',top:'0px'}).animate({left:'-200px'},2000);break;
case 2:
$('.slide'+ink).css({top:'-300px',zIndex:2,left:'0px'}).animate({top:'0px'},2000,slider);$('.slide'+oldink).css({top:'0px',left:'0px'}).animate({top:'300px'},2000);break;
case 3:
$('.slide'+ink).css({top:'0px',zIndex:2,left:'0px',opacity:0.0}).animate({opacity:1.0},2000,slider);break;
case 4:
$('.slide'+ink).css({top:_rand(1,120)+'px',zIndex:2,left:_rand(1,200)+'px',width:'1px',height:'1px'}).animate({top:'0px',left:'0px',width:'200px',height:'300px'},2000,slider);break;
case 5:
$('.slide'+ink).css({zIndex:2,left:'0px',width:'1px'}).animate({width:'200px'},2000,slider);$('.slide'+oldink).css({left:'0px',width:'200px'}).animate({left:'200px',width:'1px'},2000);break;
}oldink=ink++;if(ink>3)ink=1;},2000+_rand(1,3)*1000);};slider();});</script>

E il codice html del baner

<div class="slider">
    <div class="slide1"><a target="_blank" href="http://ioeweb.it/corso15"></a></div>
    <div class="slide2"><a target="_blank" href="http://ioeweb.it/corso16"></a></div>
    <div class="slide3"><a target="_blank" href="http://ioeweb.it/corso18 "></a></div>
</div>

Sostituire nel codice  URL di riferimento  href = "..." per conto proprio. Se i banner saranno di più quindi aggiungere simili stringhe: <div class = "slide4"> ... </ div>, <div class = "slide5"> ... </ div> etc.

Lo script, cosa c'e da cambiare

Per quanto riguarda lo script: vediamo cosa potresti cambiare :

  1. Sostituire le dimensioni del banner: 200px, 300px alle tue.
  2. switch(_rand(1,5))   il numero 5  è la quantità di effetti descritti sopra, se vuoi ridurre la loro quantità cambi la cifra, per esempio ne vuoi solo 2 allora al posto del 5 metti un 2.
  3. Le frasi  case 1: ... - case 5: ... - sono i nostri 5 effetti . È possibile rimuovere qualsiasi di esso, ma non dimenticare di cambiare la quantità di effetti come nel punto 2 .
  4. Nella prima riga oldink=3;  e nell'ultima if(ink>3)  - numero 3 è il numero di slaide con immagini . Cambiare il numero, rispettivamente se la quantità di slaide nel banner sarà diversa .

 

Letto 1247 volte