Il Software.
  Mini-guida in italiano per far funzionare gli effetti dello Scriptaculous
 

L'intento di questo articolo è riproporre in modo semplice - senza dare nulla per scontato - una mini-guida in italiano per far funzionare gli effetti dello Scriptaculous.

Iniziamo dalle importazioni dei file js:

<head>
<script src="javascript/global.js" type="text/javascript"></script>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<head>

Da quanto scritto in evidenza, appare chiaro che necessariamente i file *.js devono risiedere in una cartella del vostro server chiamata javascript.

Iniziamo quindi con l'analizzare :

la sintassi di base:

- Effect.NomeEffetto('dom_id')

scriptaculous

la sintassi con eventuali opzioni:

- Effect.NomeEffetto('dom_id', {option:value, option:value})

la sintassi Highlight,
(opzionale, se non si desidera l'effetto Fade giallo su bianco)

- new Effect.Highlight('dom_id', {startcolor:'hex', option:'hex'})

Per il momento vediamo come applicare ad una immagine un effetto, ad esempio Appear del gruppo effetti IN & OUT
Iniziamo con il creare una div, applicando una classe di parametri, inseriamo un' immagine ed identifichiamola con un ID.
Tale ID (il nome) è il 'dom ID' che dovremo inserire nella sintassi per applicare l'effetto.

<div class="esempio">
<img src="bugs.jpg" id="myDemo" />
</div>

APPLICARE UN EFFETTO AD UNA IMMAGINE TRAMITE LINK
Adesso pensiamo ad attribuire ad un testo il richiamo della funzione per applicare l'effetto

<div class="esempio">
<img src="image.jpg" id="myDemo" />
<span class="link"
onclick="new Effect.Fade(document.getElementById('myDemo'))">fx Fade</span>
<span class="link"
onclick="new Effect.Appear(document.getElementById('myDemo'))"> fx Appear</span>
</div>

DIAMO UNO SGUARDO AI PARAMETRI DELLE OPTION
- duration: (secondi in decimale) tempo di durata dell'effetto;
- delay: (secondi in decimale) tempo di attesa prima che parta l'effetto;
- from: to: questo valore deve essere compreso fra 0.0 e 1.0 per entrambe;
Appare evidente che per 0.0 non avremo alcun effetto, mentre se vogliamo applicare l'effetto Fade ed impostiamo il parametro to: .5, al 50% si fermerà.
- transition: indicare il metodo di transizione (In & Out)
- queue: 'parallel' || 'front' || 'end', utilizzare uno dei tre valori quando vengono applicati più effetti simultaneamente o secondo un certo ordine
Proviamo quindi ad applicare ad una immagine l'effetto Fade, utilizzando le option delay: 0.1, duration: 0.5 .

<span class="link"
onclick="new Effect.Fade(document.getElementById('myDemo'),{delay:0.1, duration: 0.5, to: 0.1})">fx Fade option </span>

APPLICARE UN EFFETTO DIRETTAMENTE AD UNA IMMAGINE
Possiamo adesso vedere come combinare il ripristino dell'immagine utilizzando window.setTimeout, quindi pensiamo anche a come applicare l'effetto tramite l'onclick direttamente sull'immagine

<div class="esempio">
<img src="bugs.jpg" id="myDemo" onclick="new Effect.Fade(this); window.setTimeout('Effect.Appear(\'myDemo\', {duration:.3})',2500);" />
</div>

ESEMPIO Highlight APPLICATO AL DIV
Abbiamo visto come applicare unn effetto ad una immagine, ma Effect.Highlight trova la giusta applicazione anche associato ad un div.
I valori di default prendono il Giallo '#FFFF99', ma utilizzando l'opzione startcolor possiamo attribuire un qualsiasi colore

<div class="titolo" id="myDemo4" onclick="new Effect.Highlight(this,{delay:.1, duration: 1.0, startcolor: '#333333'}); window.setTimeout('Effect.Appear(\'myDemo4\', {duration:.3})',2500);" style="cursor: pointer"></div>

APPLICHIAMO LE OPZIONI DI TRANSIZIONE
E' possibile implementare l'effetto con delle particolari transizioni.
La sintassi per il parametro è:

{ transition: Effect.Transitions.nomeEffettoTransizione }

Le transizioni sono

  • transition: Effect.Transitions.linear
  • transition: Effect.Transitions.sinoidal
  • transition: Effect.Transitions.reverse
  • transition: Effect.Transitions.flicker
  • transition: Effect.Transitions.wobble
  • transition: Effect.Transitions.pulse
  • transition: Effect.Transitions.none

Le più interessanti sono wobble e pulse. Applichiamo quindi il codice:

<div class="esempio" >
<img src="rpx_images/bugs.gif" width="180" height="140" alt="clicca sull'immagine" id="myDemo6" onclick="new Effect.Fade(this, {transition: Effect.Transitions.wobble}); window.setTimeout('Effect.Appear(\'myDemo6\', {duration:.3})',2500);" /> </div>

TABELLA EFFECTS CON EFFETTO APPEAR automatico in 1.5 sec


Fade


BlindUp


BlindDown


SlideUP


SlideDown


Grow


Shrink


DropOut


Fold


Puff


Squish


SwitchOff

 
  Today, there have been 48 visitatori (76 hits) on this page!  
 
=> Vuoi anche tu una pagina web gratis? Clicca qui! <=