CONFIGURAZIONE
Come evidenziato nel precedente capitolo per poter implementare correttamente il componente Parallax di uikit è necessario caricare all’interno del sito, oltre alla parte core del framework (uikit.css e uikit.js) anche la libreria js utilizzata in maniera specifica da questo componente.
La prima cosa da fare sarà quindi verificare di aver inserito nella sezione < head > della pagina in cui sui vuol implementare questo componente il collegamento alla libreria parallax.js (o meglio ancora alla sua versione minificata)
<link rel="stylesheet" href="uikit.css" />
<script src="uikit.js"></script>
<script src="parallax.js"></script>
ATTENZIONE! La libreria parallax.js deve necessariamente essere caricata dopo la libreria uikit.js
Fatto questo sarà poi sufficiente assegnare al contenitore per il quale si vuol animare una certa proprietà CSS allo scrolling del browser, l’attributo data-uk-parallax indicando come opzione la specifica proprietà CSS da animare e, ovviamente, il valore che deve essere utilizzato per realizzare l’animazione stessa.
Di seguito è indicato un elenco di alcune opzioni utilizzabili sull’attributo data-uk-parallax e la relativa proprietà CSS che consentono di animare.
OPZIONE | DESCRIZIONE |
x | Consente di animare la posizione sull’asse x del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare di quanti pixel dovrà traslare orizzontalmente il contenitore allo scrolling del browser. |
xp | Consente di animare la posizione sull’asse x del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare il valore in percentuale della traslazione orizzontale allo scrolling del browser. |
y | Consente di animare la posizione sull’asse y del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare di quanti pixel dovrà traslare verticalmente il contenitore allo scrolling del browser. |
yp | Consente di animare la posizione sull’asse x del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare il valore in percentuale della traslazione verticale allo scrolling del browser. |
bg | Consente di animare l’immagine di background del contenitore cui è stato assegnato l’attributo data-uk-parallax facendola scorre ad una velocità differente rispetto al resto della pagina. E’ necessario indicare la differenza di velocità in pixel |
bgp | Consente di animare l’immagine di background del contenitore cui è stato assegnato l’attributo data-uk-parallax facendola scorre ad una velocità differente rispetto al resto della pagina. E’ necessario indicare la differenza di velocità in percentuale |
rotate | Consente di animare la rotazione in senso orario del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare di quanti gradi dovrà ruotare il contenitore allo scrolling del browser. |
scale | Consente di animare lo scaling del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare di quanto dovrà scalare il contenitore allo scrolling del browser |
color | Consente di animare il colore del testo presente all’interno del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare il colore di partenza e quello di arrivo |
background-color | Consente di animare il colore di sfondo del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare il colore di partenza e quello di arrivo |
border-color | Consente di animare il colore dei bordi del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare il colore di partenza e quello di arrivo |
opacity | Consente di animare l’opacità del contenitore cui è stato assegnato l’attributo data-uk-parallax. E’ necessario indicare un valore compreso tra 0 e 1 |
Supponendo dunque di voler creare il classico effetto di parallasse sull’immagine di sfondo di un contenitore, il markup al quale fare riferimento sarà, molto semplicemente, il seguente:
<div id=”contenitore-parallax” data-uk-parallax="{bg: '-800'}">...</div>
dove l’immagine di sfondo dovrà, ovviamente, essere impostata sul div “contenitore-parallax”.
ATTENZIONE! Di base il componente Parallax consente di animare una qualsiasi proprietà CSS che abbia un solo valore. E’ possibile, ad esempio, animare l’altezza (height) o la larghezza (width) del contenitore cui è applicato l’attributo data-uk-parallax, indicando la relativa proprietà come opzione dell’attributo e specificando anche il valore cui deve tendere la proprietà in oggetto allo scrolling del browser.
E’ anche bene sottolineare poi come, a default:
- l’animazione della proprietà CSS va dal valore attuale della proprietà stessa verso il valore indicato nell’opzione dell’attributo data-uk-parallax
- l’animazione inizia nel momento in cui il contenitore cui è stato assegnato l’attributo data-uk-parallax compare all’interno della pagina e termina nel momento in cui lo stesso contenitore scompare
Entrambe queste configurazioni di default possono comunque essere modificate.