L’implementazione di questo componente è, di per sé, estremamente semplice, si tratta infatti di assegnare all’elemento che deve essere visualizzato con una certa animazione, non appena comparirà all’interno della pagina, l’attributo aggiuntivo data-uk-scrollspy specificando anche l’animazione da utilizzare.

Il markup al quale fare riferimento sarà quindi del tipo di quello qui di seguito indicato

<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>

dove al posto di uk-animation-fade può essere indicata una qualsiasi altra animazione definita nel componente Animate di uikit stesso (per maggiori informazioni sulle possibili animazione e i relative valori da poter applicare si consiglia di fare riferimento alla documentazione presente al seguente indirizzo http://getuikit.com/docs/animation.html )

Nell’esempio sopra considerato la visualizzazione dell’elemento cui è stato applicato l’attributo aggiuntivo data-uk-scrollspy, sarà animata con un effetto fade solo la prima volta in cui l’elemento stesso entra nell’area di visualizzazione della pagina web.

Se l’esigenza dovesse invece essere quella di attivare questa animazione ogni volta in cui l’elemento entra nell’area di visualizzazione della pagina sarà sufficiente utilizzare l’opzione repeat:true facendo quindi riferimento ad un markup di questo tipo:

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>

Volendo è anche possibile ritardare l’animazione che porta alla visualizzazione dell’elemento interessato indicando uno specifico delay

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay:900}">...</div>

Nell’esempio sopra indicato, l’animazione che porta alla visualizzazione dell’elemento cui è stato assegnato l’attributo data-uk-scrollspy non partirà immediatamente nel momento stesso in cui l’elemento entra nell’area di visualizzazione della pagina web ma soltanto dopo 900 millisecondi.

Infine nel caso in cui si debba attivare questo tipo di animazione non su di un singolo elemento ma su di un gruppo di elementi, è necessario racchiudere questi stessi elementi all’interno di un unico contenitore, marcarli tutti con una stessa classe (es. my-class) e utilizzare, sul contenitore, l’attributo data-uk-scrollspy con l’opzione target:’.my-class’

<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, target:’.my-class’}">

<!-- Questo elemento verrà visualizzato senza ritardo -->

<div class="my-class">...</div>

<!-- Questo elemento verrà visualizzato con un ritardo di 300ms -->

<div class="my-class">...</div>

<!-- Questo elemento verrà visualizzato con un ritardo di 600ms -->

<div class="my-class">...</div>

</div>