JavaScript: script.aculo.us, effetti derivati

Dopo aver visto gli effetti principali implementati dalla libreria aculous ci occuperemo adesso degli effetti derivati. Per ciascun effetto fornirò il nome della funzione, una breve descrizione, alcune possibili opzioni e un link che punta a un documento web con un esempio.

Effect.Appear

Fa comparire un elemento, la cui visibilità, attraverso un foglio di stile in linea o comunque presente nel documento stesso (quindi non esterno), è stata impostata su display: none. La sintassi è la seguente:

Effect.Appear('id_of_element');

Alcune possibili opzioni:

• duration: durata (in secondi) dell'effetto;
• from: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità iniziale;
• to: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità finale;

Qui trovate un esempio;

Effect.BlindDown

Questo effetto simula la discesa di una finestra, o meglio box dell'elemento, tenuta nascosta con la proprietà display: none. Anche in questo caso il foglio di stile che descrive l'elemento non deve essere esterno. La sintassi è la seguente:

Effect.BlindDown('id_of_element');

Alcune possibili opzioni:

• scaleX: valore logico che indica se scalare l'elemento orizzontalmente. Il valore passato di default alla funzione è false;
• scaleY: valore logico che indica se scalare l'elemento verticalmente. Il valore passato di default alla funzione è true;
• scaleContent: valore logico che indica se scalare o meno il contenuto. Il valore passato di default alla funzione è true;
• scaleMode: indica se scalare il box contenitore (valore box) oppure il contenuto (valore contents);
• scaleFrom: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale iniziale deve essere scalato l'elemento coinvolto nella transizione;
• scaleTo: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale finale deve essere scalato l'elemento coinvolto nella transizione;
• duration: come per altri effetti, indica la durata (in secondi) della transizione;

Qui trovate un esempio.

Effect.BlindUp

Questo effetto viene solitamente usato con quello precedente poiché realizza la salita di un box. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.BlindUp('id_of_element');

Le opzioni viste in precedenza, quindi, valgono anche per questa funzione. Qui trovate un esempio.

Effect.DropOut

Questo effetto realizza la transazione del box e una scomparsa graduale dello stesso. La sintassi è la seguente:

Effect.DropOut('id_of_element');

Qui trovate una pagina di esempio.

Effect.Fade

Applica all'elemento l'effetto fade, una dissolvenza lenta e graduale dello stesso. La sintassi è la seguente:

Effect.Fade('id_of_element');

Alcune possibili opzioni:

• from: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità iniziale;
• to: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità finale;

Qui trovate una pagina di esempio.

Effect.Fold

Riduce l'elemento diminuendone prima l'altezza poi la larghezza, fino a farlo scomparire. La sintassi è la seguente:

Effect.Fold('id_of_element');

Qui trovate una pagina di esempio.

Effect.Grow

Ottimo per l'ingresso di nuovi elementi, questo effetto aumenta le dimensioni di un elemento fino alla dimensione specificata. La sintassi è la seguente:

Effect.Grow('id_of_element');

Qui trovate una pagina di esempio.

Effect.Puff

Dissolve man mano un elemento, ingrandendolo fino a farlo scomparire (come in una nuvola di fumo). La sintassi è la seguente:

Effect.Puff('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) della transizione;
• from: valore (compreso fra 0.0 ed 1.0) per la trasparenza iniziale;
• to: valore (compreso fra 0.0 ed 1.0) per trasparenza finale;

Qui trovate una pagina di esempio.

Effect.Pulsate

Fa pulsare l'elemento per un numero definito di volte (di default, 5 volte). La sintassi è la seguente:

Effect.Pulsate('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) dell'effetto;
• from: valore compreso fra 0.0 ed 1.0 per specificare la proprietà di trasparenza da usare durante l'esecuzione dell'effetto;
• pulses: numero di pulsazioni da eseguire per tutta la durata dell'effetto;

Qui trovate una pagina di esempio.

Effect.Shake

Scuote rapidamente l'elemento, prima a sinistra poi a destra. La sintassi è la seguente:

Effect.Shake('id_of_element');

Qui trovate una pagina di esempio.

Effect.Shrink

Riduce l'elemento a partire dall'angolo in ato a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Shrink('id_of_element');

Qui trovate una pagina di esempio.

Effect.SlideDown

Simula la discesa dell'elemento, come una finestra che scorre. La sintassi è la seguente:

Effect.SlideDown('id_of_element);

Alcune possibili opzioni:

• scaleX: scala orizzontalmente, durante l'effetto, l'elemento. Il valore passato di default alla funzione è false;
• scaleY: scala verticalmente, durante l'effetto, l'elemento;
• scaleContent: scala il contenuto del box, il valore passato di default alla funzione è true;
• scaleFromCenter: inizia a scalare l'elemento a partire dal centro, il valore passato di default alla funzione è false;
• scaleMode: può essere box (valore usato di default) o contents;
• scaleFrom: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento iniziale dell'elemento;
• scaleTo: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento finale dell'elemento;
• duration: indica la durata (in secondi) dell'elemento;

Qui trovate una pagina di esempio.

Effect.SlideUp

E' l'effetto complementare a SlideDown e simula, pertanto, la salita dell'elemento. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.SlideUp('id_of_element');

Le opzioni viste per SlideDown sono valide anche per questa funzione. Qui trovate una pagina di esempio.

Effect.Squish

Realizza la scomparsa dell'elemento comprimendolo nell'angolo in alto a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Squish('id_of_elemenet');

Qui trovate una pagina di esempio.

Effect.SwitchOff

Realizza la scomparsa dell'elemento simulando lo spegnimento di un televisore (vecchio). La sintassi è la seguente:

Effect.SwitchOff('id_of_element');

Qui trovate una pagina di esempio.

Effect.toggle

Consente di alternare con facilità gli elementi con animazione. La sintassi da usare è la seguente:

Effect.toggle('id_of_element',['appear'|'slide'|'blind'],[options])