Slide verticale full-background: qualche spunto e un paio di suggerimenti

Vi avviso, questo articolo è per chi ha una minima dimestichezza con jquery e si occupa di programmazione. Chi non ha idea di cosa sia jquery, potrà comunque dare un'occhiata a un mondo “esotico” perché a lui sconosciuto.

Lo ammetto, le slide non le amo troppo.

Per questo, quando mi hanno comunicato che dopo Spazio Compost (che già a complessità di effetti jquery) non era male, avrei dovuto fare Residenza Palazzo Visdomini, con le sue belle slide a schermo intero, ho capito che avrei dovuto rimboccarmi le maniche.



Obbiettivamente, avrei potuto gettarmi su questo ottimo plugin, Superslide, che avrebbe semplificato il mio lavoro.

Perchè non l'ho fatto?

Perché purtroppo, non aveva una funzionalità, a me necessaria, sufficientemente ben fatta e cioè la slide verticale a tutto schermo.
Altri plugin analizzati erano troppo pesanti da utilizzare.
Per questo, ho capito che potevo fare una cosa sola: farla a mano.

Come si fa una slide in jquery a tutto schermo, quindi?


Fondamentalmente bisogna tenere conto di tre aspetti:

  1. Il meccanismo di Slide infinito ( e cioè il tornare alla prima Slide della fila, una volta che siamo arrivati all'ultima)
  2. Il riposizionarsi sulla stessa Slide nel momento del ridimensionamento della pagina
  3. Il mettere la slide a tutta pagina, senza avere un'immagine evidentemente stiracchiata.

Partiamo dal terzo aspetto. Per questa cosa in particolare, mi sono affidato a questo plugin :
jquery fulllbg che fa esattamente quello che dice, imposta solo width ed height tali da mettere l'immagine sempre a tutta pagina. Un codice leggero e versatile, che uso spesso. Oltre a ciò è molto comprensibile, cosa che non guasta. Potremmo poi parlare per ore del fatto che, per pure ragioni fisiche, l'immagine a tutto schermo, se vogliamo rispettarne la ratio (il rapporto fra larghezza e altezza), risulterà spesso “tagliata” ai margini: è un aspetto che anche grafici addetti ai lavori faticano a capire alla prima.

Bando alle ciance, passiamo al primo aspetto.

Ipotiziamo di avere:
1)Tre immagini che si chiamano immagine 0, immagine 1 e immagine 2.
2)Uno schermo alto 768px.
Per una slide verticale, infatti, ciò che ci interessa è l'altezza dello schermo. Per una orizzontale è la larghezza.

Alle tre immagini metteremo per comodità la classe "background".

Ogni immagine poi avrà la classe specifica associata alla sua posizione back0, back1 e back2

Le tre immagini dovranno essere abbastanza larghe, da avere, anche se ridimensionate in larghezza, sempre un'altezza superiore a 768px.

Se vorremo vedere per prima immagine 0, ci basterà dare ad ognuna left 0 e top adeguato.

immagine 0 avrà top 0,
immagine 1 avrà top:768
immagine 2 avrà top: 1536

Mi basterà quindi metterle in position absolute e vedrò la prima immagine, mentre le altre due saranno sotto quella visibile.
In realtà, affinché succeda questo, il loro contenitore, dovrà essere alto 768 px e quindi essere in position fixed o absolute, oltre che avere la proprietà overflow impostata su hidden.

<style>
.contenitore
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
img,
{
position:absolute;
}
.back0
{
top:0px;
}
.back1
{
top:768px;
}
.back2
{
top:1536px;
}
</style>
<div class=”contenitore”>
 <img class=”background back0” src=”immagine0.jpg”>
 <img class=”background back1” src=”immagine1.jpg”>
 <img class=”background back2” src=”immagine2.jpg”>
</div>

Scorrimento della slide verso l'alto


Per fare un effetto di animazione verso l'alto, e cioè la slide0 che scorre in alto fino a scomparire dello schermo e la 1 che mi basterà usare la proprietà animate del jquery in questa maniera:

$( ".background" ).animate({
top: "-="+alto,
}, velocita, function() {
// Animation complete.
spostamento=0;
});

Cosa ho fatto? Ho sempicemente diminuito il top di tutte e tre le immagini, gradualmente, di un certo tot, chiamato da me “alto”.
A quanto corrisponde la variabile “alto”? Semplice! All'altezza dello schermo, e cioè 768px.
[Quanto sarò vecchio dentro, tra l'altro, per citare la vecchia risoluzione 1024*768, compagna dei primi videogiochi della mia vita ?]


In questa maniera, dopo aver invocato l'animate, la prima immagine,

(immagine 0 ) avrà top:-768
immagine 1 avrà top 0
immagine 2 avrà top 768

Quindi vedrò a schermo immagine 1.

Cosa succede se voglio vedere immagine 2 ?
userò di nuovo il metodo animate , e mi troverò con:

immagine 0 con top:-1536
immagine 1 con top:-768
immagine2 con top:0

Scorrimento a loop infinito


A questo punto, usare di nuovo il metodo animate, mi porterebbe a vedere scomparire l'ultima immagine visibile (la 2) verso l'alto, e poi il nulla.
Cosa fare per evitare ciò ed avere quindi uno scorrimento infinito?

Semplice! Imposto immediatamente immagine 0 a top:768, in modo che sia immediatamente sotto immagine 2

immagine 1 con top:-768
immagine2 con top:0
immagine 0 con top:768

invoco l'animate e una volta ultimato, riporto tutto alla condizione di partenza, e cioè vedrò

immagine 0 avrà top 0,
immagine 2 avrà top:-768
immagine 1 avrà top:-1536.

A questo punto ricomincio il gioco, e con un piccolo trucchetto, do l'impressione all'utente che la slide sia “infinita”

Ricapitolando, quindi:


if ($('.back'+massimo).offset().top>0 && spostamento!=1)
{
spostamento=1;
$( ".background" ).animate({
top: "-="+alto,
}, velocita, function() {
// Animation complete.
spostamento=0;
});
}
else
{
$('.back0').css('top',alto+'px');
$( ".background" ).animate({
top: "-="+alto,
}, velocita, function() {
// Animation complete.
spostamento=0;
posiziona();
});
}



In questa maniera uso sempre il metodo animate ( e basta), fino a che immagine 2 ha top superiore a 0, altrimenti do il via al gioco di prestigio detto prima, che tecnicamente è eseguito dall'else.
Cosa contiene posiziona? Semplice! Lo status originale dei top delle immagini, e cioè

immagine 0 abbia top 0,
immagine 1 avrà top: 768
immagine 2 avrà top: 1536

Con queste poche indicazioni, chi non hai mai fatto una slide a tutto schermo a mano, perchè gli mancava quel guizzo in più, e conosce comunque jquery, potrà già avere idea su come iniziare a farne una. Io vi ho dato pochi spunti, suggerimenti, più per farvi capire il meccanismo che per darvi la pappa già pronta. Il vero codice è molto più complesso, io l'ho ridotto, per darvi un assaggio, ma in soldoni non si tratta realmente altro che di questo.

E il secondo aspetto? Quello alla prossima puntata, mica posso regalarvi cosi preziosi frammenti di codice tutti in una volta!

Tra l'altro se metteste qualche mi piace, potrei anche essere così disinteressato da regalarvi il codice di produzione, su questi stessi schermi. E' un grosso “se”, però …  ;)



Post più popolari