post h1 Mini-guida in italiano per far funzionare gli effetti dello Scriptaculous. ~ Ubuntulandiapost h1

gennaio 27, 2015

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

| No comment

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

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog

Ubuntu-Logo-apple-style400x400

, , , , ,

Nessun commento:

Posta un commento

Caricamento in corso...

Ultimi post pubblicati

Archivio

Ubuntulandia in Instagram

>center>

Post Più Popolari