Come evidenziato nel precedente capitolo, a default, la proprietà oggetto del componente Parallax di uikit si anima dal suo valore attuale verso il valore indicato all’interno dell’attributo data-uk-parallax.

Volendo è possibile modificare questo comportamento indicando esattamente il valore iniziale (start) e quello finale (stop) dell’animazione.

Per fare questo è sufficiente passare all’opzione indicata nell’attributo data-uk-parallax una stringa costituita da due diversi valori separati da una virgola.

Il primo rappresenta il valore che dovrà assumere la proprietà in oggetto all’inizio dell’animazione, il secondo rappresenta invece il valore che dovrà assumere la stessa proprietà alla fine dell’animazione.

ATTENZIONE! Come indicato nella tabella riportata nel capitolo precedente, alcune delle proprietà animabili con il componente Parallax di uikit (color, background-color ecc…) necessitano obbligatoriamente di entrambi i valori di star e stop

Facendo quindi riferimento ad un markup di questo tipo

<div id=”contenitore-parallax” {x: '-100,100', 'background-color': '#ffffff,#ff2200'}">...</div>

il “contenitore-parallax” partirà, non appena visibile all’interno della pagina, spostato, rispetto alla sua posizione attuale, di 100px verso sinistra. Allo scrolling del browser verso il basso il contenitore traslerà in orizzontale spostandosi verso destra ed arrivando ad occupare al termine dell’animazione una posizione spostata di 200px verso destra.

Durante questa animazione inoltre il suo colore di sfondo passerà dal bianco (#ffffff) al rosso (#ff2200)