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:
- Il meccanismo di Slide infinito ( e cioè il tornare alla prima Slide della fila, una volta che siamo arrivati all'ultima)
- Il riposizionarsi sulla stessa Slide nel momento del ridimensionamento della pagina
- 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
$( ".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 ?]
[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ò … ;)
Commenti
Posta un commento