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')
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:
<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
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog