Come indicato nei precedenti capitoli di questa guida nella configurazione di default l’animazione, oggetto del componente Parallax, 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.

E’ comunque possibile personalizzare la durata di questa animazione in due modi differenti:

• utilizzando l’opzione target
• utilizzando l’opzione viewport

L’opzione target consente di legare la durata dell’animazione alla visibilità, all’interno del viewport, di un componente diverso da quello cui è stato assegnato l’attributo data-uk-parallax.

Il valore dell’opzione target dovrà quindi essere esattamente l’id del componente a cui legare la durata dell’animazione.

Facendo quindi riferimento ad un markup di questo tipo

<div id="elemento-target">...</div>

<div id=”contenitore-parallax” data-uk-parallax="{ bg: -200, target: '#elemento-target'}">...</div>

otterremo che l’animazione impostata sul background del “contenitore-parallax” inizierà nel momento in cui il div “elemento-target” diventerà visibile all’interno della pagina e terminerà nel momento in cui questo stesso elemento scomparirà dal viewport.

L’opzione viewport consente invece di personalizzare la durata dell’animazione in relazione alla visibilità all’interno del viewport dell’elemento cui viene applicato l’attributo data-uk-parallax.

In questo senso impostando questa opzione sul valore 1 oppure sul valore false otterremo esattamente il comportamento di default: l’animazione inizierà nel momento in cui il contenitore cui è stato assegnato l’attributo data-uk-parallax compare all’interno della pagina e terminerà nel momento in cui lo stesso contenitore scompare

Impostando invece questa opzione ad esempio, sul valore 0.5, l’animazione inizierà nel momento in cui il contenitore cui è stato assegnato l’attributo data-uk-parallax compare all’interno della pagina e terminerà quando lo stesso contenitore raggiungerà la metà del viewport.

Il markup al quale fare riferimento per questa opzione sarà quindi il seguente:

<div id=”contenitore-parallax” data-uk-parallax="{bg: -200, viewport: '0.5'}">...</div>